前言
改变从行动开始。在vue项目开发中,通常我们会对我们的请求有一些个性的需求,所以会对axios进行针对性的配置,以及封装。
1.安装axios与引入
安装
npm install axios
引入
第一种,全局引入 在 main.js 中写入 import axios from 'axios'
第二种,在封装api文件中引入即可(常用)
views文件夹内创建api文件夹,里面创建index.js文件
2.axios配置
index.js中写入
import axios from 'axios'
import { Qs } from 'qs'//vue自带方法 如果未用到 无视即可
//axios配置
const http = axios.create({
method: 'post',
baseURL: process.env.VUE_APP_BASE_API,//请求的url前缀
withCredentials: true,//开启withCredentials后,服务器才能拿到你的cookie,当然后端服务器也要设置允许你获取你开启了才有用
timeout: 5000,//请求超时
headers: {//headers设置 如缓存等 没需求的话都可以不需要
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
});
// axios 请求拦截:
http.interceptors.request.use(config => {
//通常处理token相关逻辑
// 判断localStorage 或者 SessionStorage 内有无token 进行相应处理 此处简单的做了个赋值token操作
// let token = localStorage.getItem('mytoken');
// config.headers['Authorization'] = token;
return config;
}, err => { return Promise.reject(err); });
// axios 响应拦截;
http.interceptors.response.use(res => {
return res;
}, err => {
return Promise.reject(err.data);
});
export default http;
// 封装
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
http.get(url, { params: params }).then(res => {
res.data ? resolve(res.data) : resolve(res);
})
});
}
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
http.post(url, params).then(res => {
res.data ? resolve(res.data) : resolve(res);
})
});
}
3.http使用
上面封装好了就要正式使用了,首先我有一个homePage.vue页面,所以我在views文件夹api文件夹,里面创建homePage.js文件,用来管理此页面的请求。
import http from './index'
import { get, post } from './index';
import { stringify } from 'qs'
const api = {
home_api: (params) => http.post("/V2/wmsbase/carrier/list", stringify(params)),//不使用get post封装 stringify看需求使用
home2_api: params => get('/V2/wmsbase/carrier/list', params),//使用get post封装
}
export default api;
homePage.vue中使用
vue项目中http请求的使用通常就两种。如下,看个人喜好使用即可。
import http from 'api/homePage'//这里注意文件位置,我是vue.config.js配置文件配过路径映射使用所有的引入都可以api/xxxx
methods: {
//第一种 async await 同步方式处理异步逻辑
async requestApi() {
let res = await http.home_api();
if (res.code == 200) {
//逻辑
}
},
//第二种 .then中处理逻辑
requestApi2() {
home2_api().then(res => {
if (res.code == 200) {
//逻辑
}
})
}
},
结束语
改变从行动开始。axios配置和封装以及使用大体就是如此了,下期给大家带来vue项目配置及打包设置,请求代理,路径映射等在vue.config.js中如何配置。具体可以参考我的开源项目链接。项目上面axios封装,http封装以及vue.config.js配置都已经配置好。希望能给大家带来一点帮助。