vue axios. this.$http this.axios this.$axios.
一、在需要的页面引用axios安装axios包npminstallaxios引入使用axiosimportaxiosfrom"axios"发送基本的请求axios({url:"http://api.github.com/users"}).then( (result) => {console.log(result);
·
安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入。
一、在需要的页面引用 axios.
- 安装axios包
npm install axios
- 在需要的页面引入使用axios
import axios from "axios"
- 发送基本的请求
axios({
url:"http://api.github.com/users"
}).then( (result) => {
console.log(result);
})
axios并没有install 方法,所以是不能使用vue.use()方法的。那么难道每个文件都要来引用一次?解决方法有很多种:
一、结合 vue-axios使用this.axios.
vue-axios用于将axios集成到Vuejs的小包装器
1.安装vue-axios
npm install --save axios vue-axios
2.在主入口文件main.js中引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
3.在组件中使用(在组件文件中的methods里去使用)
getNewsList(){
this.axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
},
二、axios 改写为 Vue 的原型属性this.$axios. this.$http.
1.在主入口文件main.js中引用,之后挂在vue的原型链上
import axios from 'axios'
Vue.prototype.$axios= axios
2.在组件中使用
this.$axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
相关:vue使用axios的几种方式 this.$http.
以 Vue.use(VueAxios,axios); 这个为准
三、结合vuex
封装 axios
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
}
return config
}, error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
})
// respone拦截器
service.interceptors.response.use(
response => response,
/**
* 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/
// const res = response.data;
// if (res.code !== 20000) {
// Message({
// message: res.message,
// type: 'error',
// duration: 5 * 1000
// });
// // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
// confirmButtonText: '重新登录',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// store.dispatch('FedLogOut').then(() => {
// location.reload();// 为了重新实例化vue-router对象 避免bug
// });
// })
// }
// return Promise.reject('error');
// } else {
// return response.data;
// }
error => {
console.log('err' + error)// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
})
export default service
import request from '@/utils/request'
//使用
export function getInfo(params) {
return request({
url: '/user/info',
method: 'get',
params
});
}
相关链接:
axios使用说明
Vue中Axios封装API接口的思路及方法
new URLSearchParams( )用法说明
注意:所有浏览器都不支持URLSearchParams,但是有一个polyfill可用(确保polyfill全局环境)。
Vue学习-axios发送http请求 #3 接口模块化处理
更多推荐
所有评论(0)