和之前文章《微信小程序封装request请求》很像的独门For循环写法…
优势确实是很干净啦~
1、新建两个文件,用于对axios的封装和对接口的管理
我这里在src/assets/js/api之下新建了一个index.js和apiList.js
import axios from 'axios'; import { Message } from 'element-ui'; import apiList from './apiList'; import store from '@/store'; axios.defaults.timeout = 5000; // 超时终止请求 axios.defaults.baseURL ='http://192.168.0.88:8080/'; // 配置请求地址 // 设置请求拦截器 axios.interceptors.request.use( config => { // const token = getCookie('名称'); // 注意使用的时候需要引入cookie方法,推荐js-cookie config.data = JSON.stringify(config.data); config.headers = { 'Content-Type': 'application/json;charset=UTF-8', // 'Content-Type':'application/x-www-form-urlencoded' } if(store.state.token) { config.headers['Authorization'] = store.state.token; } return config; }, error => { return Promise.reject(err); } ); // 设置响应拦截器 axios.interceptors.response.use( response => { // if(response.data.errCode == 2){ // router.push({ // path:"/login", // querry:{redirect:router.currentRoute.fullPath} // 从哪个页面跳转 // }) // } // return response; let res = response.data; // 取到响应返回的数据 if(res.code == 200) { return res.data; } else { // 状态码如果不是200则为报错,弹出报错信息,且不返回任何数据 Message.error(res.msg); } }, error => { Message.error(error.message); return Promise.reject(error) } ) // 以下是封装方法: // get delete请求方式中,第一个参数为请求的url地址,第二个参数为请求的一些配置项,需要传递给后端的参数包含在配置项的data或者params属性中, // post put patch请求则第一个参数为url地址,第二个参数是需要入参的json数据,第三个参数是入参以外的其他配置项。 var list = {}; for(let item in apiList) { list[item] = function(params) { let [method, url] = apiList[item]; let data = (method == 'get' || method == "delete") ? {params} : (method == 'post' || method == "put" || method == "patch") ? params : {} return new Promise((resolve, reject) => { axios[method](url, data) .then(res => { if(res) { // 在响应拦截器中,设置了code非200不返回数据,res则有可能会是undefined。所以判断res有数据才用resolve送出去。 resolve(res); } }) .catch(err => { reject(err); }) }) } } export default list;
在apiList.js中,对所有接口进行统一管理:
let apiList = { login: ["post", "/user/login"], // 用户登录 getCaptcha: ["get", "/user/captcha"], // 获取登录图片验证码 logout: ["get", "/user/logout"], // 用户登出 } export default apiList;
2、在main.js中引入
import http from '@/assets/js/api'; // 引入接口列表 Vue.prototype.$http = http; // 将接口列表挂载到全局
3、在页面中使用封装好的方法
let params = { username: "barben", password: "12345678" } this.$http.login(params) .then(res => { console.log(res); }) .catch(err => { console.log(err); })