一般项目往往要对 axios 库进行二次封装，添加一些自定义配置和拦截器等
案例
./service/axios.js
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
* 说明：axios 二次封装* 参数：type //请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法* apiName //接口地址* url //接口模块* options //配置参数,例如传{params={}}*/
import axios from 'axios'import api from 'service/apiConfig' //真实接口配置import store from 'vuexStore/store.js' //引用vueximport qs from 'qs'import template from 'url-template'
/** axios基础配置 */axios.defaults.timeout = 5000;axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'
// http request 拦截器// 一般设置 tokenaxios.interceptors.request.use( config => { if (localStorage.aynUserToken) { config.headers.common['X-AIYANGNIU-SIGNATURE'] = localStorage.aynUserToken; } return config; }, err => { return Promise.reject(err); });
// http response 拦截器axios.interceptors.response.use( response => { if (response.data) { let code = response.data.code switch (code) { case 109: // 109 清除token信息并跳转到登录页面 localStorage.aynUserToken = '' // vue.$loginVerify() break; case 110: // vue.$roleVerify() break; } } return response; }, error => { if (error.response) { let status = error.response.status switch (status) { case 401: // 109 清除token信息并跳转到登 大专栏 axios 二次封装录页面 localStorage.aynUserToken = '' // vue.$loginVerify() break; } } let err = error.response ? (error.response.data || error.response) : (error.message || error) return Promise.reject(err) });
/* 二次封装 */export default async(type, apiName, url, data, options) => {
let vm = this // url拼接 let path = (apiName != '') ? api[apiName] + url : url // url-template let UrlTemplate = template.parse(path) // 格式化地址,若data传入参数是{params:{xx:"xxx",xxx:"xxxx"}}结构的，expand要取{xx:"xxx",xxx:"xxxx"}来格式化url if (data && data.hasOwnProperty("params")) { path = UrlTemplate.expand(data.params) if (!data.params) { data.params = {} } data.params._t = Date.now().toString() } else { path = UrlTemplate.expand(data) if (data) { data._t = Date.now().toString() } }
// 设置 {form: true} post/put data转参数拼接字符串 if (options && options.form) { let opt = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } } // 利用 qs 库的stringify() 方法拼接参数字符串 data = qs.stringify(data) options === {} ? options.headers = opt.headers : options = opt } // axios await axios[type](path, data, options).then((res) => { // res.data 才是响应数据 vm.result = res.data }) return vm.result}
|
调用
- get/delete 传数据 {} 或者 {params}
- post/put 传输数据 params（对象）
- 如果是表单提交 {form: true}
12345678910111213 |
import res from 'service/axios'
/* 加入进货单、加入采购申请 */export const AddToCart = (params) => res('post', 'apiItem', '/carts/add', params, {form:true})
/* 获取进货单列表 */export const GetCartList = () => res('get', 'apiItem', '/carts/list', {})/* 更新购物车商品数量 */export const CartUpdate = (params) => res('put','apiItem', '/carts/update/{id}',params, {form:true})
/* 根据购物车记录编号(列表时可批量)删除 */export const CartDelete = (params) => res('delete','apiItem', '/carts/delete',{params})...
|
补充
url-template 库使用
12345678910 |
var template = require('url-template');
var emailUrl = template.parse('/{email}/{folder}/{id}');
// Returns '/[email protected]/test/42'emailUrl.expand({ email: '[email protected]', folder: 'test', id: 42});
|
原文地址：https://www.cnblogs.com/lijianming180/p/12041499.html
时间： 2024-10-13 04:50:31