Vue的axios二次封装
第一步：配置路由拦截
前期工作
- 在src目录下新建 utils文件夹
- utils文件夹下新建 request.js
request.js 初始代码
// 1.引入axios
import axios from "axios";
import Qs from 'qs'；
import store from '@/store/index.js';
// 判断当前的运行环境的
const isDev = process.env.NODE_ENV === 'development'
// 2.创建实例对象
const instance = axios.create({
// 根据运行环境配置请求基准地址
baseURL: isDev ? 'http://121.89.205.189:3001/api' : 'http://121.89.205.189:3001/api',
timeout: 6000 // 请求的超时时间
})
// 3.请求拦截器 ==> 前端给后端的东西
instance.interceptors.request.use(
(config) => {
// 判断是否存在token,如果存在将每个页面header添加token
if (store.state.token) {
config.headers.common['Authorization'] = store.state.token
}
// post请求参数如需进转换，详情见注意！！
if(config.method==='post')
{
config.data=Qs.stringify(config.data);
}
// 配置请求头 默认是json
config.headers["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
return config
},
(error) => {
console.log("对请求错误做些什么=========");
return Promise.reject(error)
})
// 4.响应拦截器 ==> 后端给前端的东西
instance.interceptors.response.use(function (response) {
// 对响应数据做些什么 ==> 判断返回状态码
return response
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
export default instance
注意：
axios默认的带的请求头是 config.headers['Content-Type'] = 'application/json'
如果post接口，后端给的头是application/x-www-form-urlencoded ，需要引入qs,然后转码，qs是axios自带可直接使用，不用安装
二次封装
前期工作
- 在src目录下新建 api 文件夹
- 在api文件夹下可以分别对不同界面创建新的文件夹进行管理
例子
// 引入初步封装axios
import request from '@/utils/request';
// get 传参用 params
// 获取购物车列表 (传用户id)
export function getList(params) {
return request({
url:'/cart/list',
params
})
}
// post 传参用 data
// 加入购物车 (传用户id 和 商品goodsId)
export function addGood(data) {
return request({
method:"post",
url: "/cart/add",
data
})
}
注意：
params 是添加到url的请求字符串中的，用于get请求
data 是添加到请求体（body）中的， 用于post请求。
使用封装好的 axios
用法：在需要请求的界面中引入，然后解构出需要的方法，直接使用，使用时需要传参的话要写成对象格式。
//引入封装好的请求数据组件
import { getProDetailData } from "./../../api/detail";
import { addCart } from "./../../api/cart";
//====>调用
addCart({
// 用户名
userid,
// 商品id
proid: this.proid,
// 添加数量
num: 1
}).then(res => {
if (res.data.code != "10119") {
Toast("加入购物车数据成功");
}
});
