一,axios介绍
axios是一个基于promise的http库,可以用在浏览器和node.js中,可以提供一下服务:
1、从浏览器中创建XMLHttpRequests
2、从node.js创建http请求
3、支持PromiseAPI
4、拦截请求和响应
5、转换请求数据和响应数据
6、取消请求
7、自动转换JSON数据
8、客户端支持防御XSRF
二,安装
安装命令:npm install axios
三,请求方式
1 get 请求,一般多用于获取数据
2 post请求,主要提交表单数据和上传文件
3 put请求,主要对数据进行全部更新
4 patch请求,一般用于只对更改过的数据进行更新
5 delete请求,一般用于删除请求(参数可以和post一样放在请求体上也可以放在url上)
四,请求响应拦截
对于一次http请求简单来讲,就两个过程(非http建立连接过程),一是将前端请求发送到后端,二是将后端处理后的数据拿到。那么在请求发送之前,以及数据返回之后,我们都可以对请求的结构以及返回的数据做一个处理,然后在将请求发给后端(如在请求头中增加token),如果是后端返回数据,则可以根据状态码来进行提前的一个提示。以下就对axios封装的代码做一个简单的介绍
1,对axios进行基础配置
import axios from 'axios'; // 该处引入axios模块
// 构建axios实例
const instance = axios.create({
baseURL: process.env.BASE_API, // 该处url会根据开发环境进行变化(开发/发布)
timeout: 10000 // 设置请求超时连接时间
})
2 请求拦截器
instance.interceptors.request.use(
config => {
console.log(config); // 该处可以将config打印出来看一下,该部分将发送给后端(server端)
config.headers.token = '该处可设置token内容';
return config // 对config处理完后返回,下一步将向后端发送请求
},
error => { // 当发生错误时,执行该部分代码
console.log(error); //调试用
return Promise.reject(error)
}
)
3,response拦截器(数据返回后,具体页面加载之前)
instance.interceptors.response.use(
response => { // 该处为后端返回整个内容
const res = response.data; // 该处可将后端数据取出,提前做一个处理
if ('正常情况') {
return response // 该处将结果返回,下一步可用于前端页面渲染用
} else {
alert('该处异常');
return Promise.reject('error')
}
},
error => {
console.log(error),
return Promise.reject(error)
}
)
4,将axios实例导出,方便其他页面调用
export default instance
5,其他页面调用上述实例发送请求,例如在api .js编写
import instance from '../xxx.js'; // 将实例导入
const qs=require('qs'); // 用于处理前端发送数据格式
const base = process.env.BASE_URL; // 该处根据开发环境变化
export const GetStepperData = (params) => request.post('/cart/update',params); // 该处即可实现向后端发送请求,并将数据返回给调用该接口的位置
6,在其他页面按需导入和引用GetStepperData (名字随便起)
import { GetStepperData } from "@/request/api";//其中这个 "@/request/api"是写上面的文件路径,这是按需导入
引用:
GetStepperData ({请求体:xxx,}).then(res=>{})