vue对axios进行封装实现前后端的接口联调
axios 是什么?
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
axios的特性是什么?
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
再对vue-cli工程进行axios封装时 我们会用到axios 及 vue-cli的文档,地址如下
接下来我们继续实现vue封装axios
安装
axios npm install axios
安装好后 我们会看到package.json文件中 有axios的版本号 即代表安装完成
我们在src目录下创建utlis文件夹,并创建request.js文件 结构目录如下
接着我们打开axios文档找到 Creating an instance(创建实例) 和 Interceptors (拦截器) 将代码复制到request.js中 代码如下
import axios from 'axios';
//创建axios,赋给变量service
// 在Creating an instance中我们目前只需要baseURL 和timeout两个
const service = axios.create({
baseURL: process.env.VUE_APP_PRO_BASE_URL,
timeout: 10000,//超时
});
//添加请求拦截器
service.interceptors.request.use(function (config) {
//在发送请求之前做一些事情
console.log(config);
return config;
}, function (error) {
//队请求错误做些什么
return Promise.reject(error);
});
//添加响应拦截器
service.interceptors.response.use(function (response) {
//使用响应数据返回响应；
let data = response.data
if (data.code !== 0) {
return Promise.reject(data);
}else {
return response;
}
}, function (error) {
//使用响应错误返回
return Promise.reject(error);
});
// 将service 导出
export default service;
紧接着我们需要在src目录下创建api文件夹并创建index.js文件夹,这里创建的文件主要是对api接口进行分类方便后期维护,在index文件中我们需要引入utils中导出的service,代码如下
import service from "../utils/request";
// Send a POST request
export function GetCode(data){
return service.request({
//发送POST请求
method: 'post',
url: '/getCode/',
data
})
}
接着我们在需要调用接口的vue中引入接口方法
import {GetCode} from './api/index'
// 引入GetCode后 接口书写方式为
GetCode(){
let requestData = {
username: this.username,
password: this.password
}
GetCode(requestData).then(res => {
console.log(res)
})
}
到此我们vue-cli对axios的封装即可完成,但是和后端做联调时会出现跨域的现象,这里我们要处理一下,在vue.config.js文件中写入部分配置,方法如下
在vuecli文档中搜索
devServer.proxy
将代码复制到vue.config中 代码如下
proxy: {
'/devApi': {
// target这里是我们需要进行调用接口的地址
target: process.env.VUE_APP_PRO_BASE_URL,
changeOrigin: true,
//pathRewrite的作用是使用proxy进行代理时，对请求路径进行重定向以匹配到正确的请求地址
pathRewrite: {
[`^${process.env.VUE_APP_PRO_API}`]: ''
}
}
}
我这里用到的process.env.VUE_APP_PRO_BASE_URL模式需要看一下vue-cli文档的模式和环境变量这一块,或者就直接替换成接口地址也是可以的 模式和环境变量|VUE CLI 接下来我们看一下接口请求效果
