Axios（IE8+）
基于promise的http库
可用于浏览器与node.js
1.特性
- 支持promise API
- 拦截请求和相应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF攻击
2.axios请求方法：get，post，put, patch, delete
1get: 获取数据
2post（新建）: 提交数据（表单，文件）
3put（更新）: 更新数据（所有数据推送到后端）
4patch（耗性能）: 更新数据（只将修改的数据推送到后端）
5delet: 删除数据
3.返回304(重定向)
表示重复的请求，直接返回304，加快请求速度
4.post(Content-Type)
11.form-data 表单提交（文件上传）
22.application/json 常用数据提交
3
4//form-data请求举例
5let formData = new FormData()
6for(let key in data){
7 formData.append(key,data[key])
8}
5.并发请求（同时进行多个请求，并统一处理返回值）
1//axios.all() 用于多个请求并发
2//axios.spread() 用于处理返回值
3
4axios.all(
5 [
6 axios.get('/data.json1'),
7 axios.get('/data.json2')
8 ]
9).then(
10 axios.spread((json1,json2)=>{
11 console.log(json1,json2)
12 })
13)
6.axios实例化
当每请求的设置不尽相同时，可以通过配置实例发起不同设置的请求
1let instance = axios.create({
2 baseURL: 'http://localhost:8080',
3 timeout: 1000,
4})
5instance.get('/data.json').then(res=>{
6 console.log(res)
7})
7.axios配置
- 全局配置
11.axios.defaults.timeout = 2000
22.axios.defaults.baseURL = ''
- 实例配置
1let instance = axios.create({
2 //配置
3 baseURL: 'http://localhost:8080',//请求的域名，基本地址
4 timeout: 1000,//超时取消请求时长（ms），一般后台会有定义
5 url: '/data.json',//请求路径
6 method: 'get',//get，post，put, patch, delete(请求方法)
7 headers: {//设置请求头
8 token: '',//身份信息
9 },
10 params: {},//请求参数拼接在url（get）
11 data: {},//请求参数放在请求体（post）
12})
13instance.defaults.timeout = 3000
- 请求配置
1instance.get('/data.js',{
2 timeout: 5000
3})
- 优先级
请求配置>实例配置>实例配置
8.拦截器
在请求或响应被处理前拦截他们
- 请求拦截器
1axios.interceptors.request.use(
2 config => {
3 //发送请求前
4 return config
5 },
6 err => {//错误处理
7 //请求错误的时候 404 not find,401超时等
8 return Promise.reject(err)
9 }
10)
- 响应拦截器
1axios.interceptors.response.use(
2 res => {
3 //请求成功
4 return res
5 },
6 err => {//错误处理
7 //响应错误的时候 500服务器错误等
8 return Promise.reject(err)
9 }
10)
- 取消拦截器
1axios.interceptors.request.eject(interceptors)
9.取消请求
1let source = axios.CancelToken.source() //创建实例
2axios.get('/data.js',{//开始请求
3 cancelToken: source.token//配置项
4}).then(res => {
5 console.log(res)
6}).catch(err => {
7 console.log(err)
8})
9
10source.cancel('请求取消了')//调用方法取消请求
10.统一封装(async await 方法)
api.js接口信息
1//api.js接口信息
2const api = {
3 api1: {
4 method: 'get',
5 url: '/data1.js
6 },
7 api2: {
8 method: 'post',
9 url: '/data2.js
10 }
11}
12export default api
http.js请求对象
1import axios from 'axios'
2import Api from 'api.js'
3
4let instance = axios.creat({
5 baseURL: 'http://localhost:8080',
6 timeout: 1000
7})
8const Http = {}//包裹请求方法的容器
9
10for(let key in Api){
11 let api = Api[key]
12 Http[key] = async function(
13 params,//请求参数
14 isFormData=false,//是否是form-data请求
15 config={}//配置参数
16 ){
17 let newParams = {}
18
19 //判断content-type是不是form-data类型
20 if(params && isFormData){
21 newParams = new FormData()
22 for(let i in params){
23 newParams.append(i,params[i])
24 }
25 }else newParams = params
26
27 //不同请求的判断
28 let res = {}
29 if(api.method === 'put' || api.method === 'post' || api.method === 'patch'){
30 try{
31 res = await instance[api.method](api.url,newParams,config)
32 }catch(err){
33 res = err
34 }
35 }else if(api.method === 'delete' || api.method === 'get'){
36 config.params = newParams
37 try{
38 res = await instance[api.method](api.url,config)
39 }catch(err){
40 res = err
41 }
42 }
43 return res //返回响应值
44 }
45}
46//请求拦截器
47instance.interceptors.request.use(
48 config => {
49 //发起请求前
50 Toast.loading()
51 return config
52 },
53 err => {
54 //请求错误
55 Toast.clear()
56 return err
57 }
58)
59//响应拦截器
60instance.interceptors.response.use(
61 res => {
62 //响应前
63 Toast.clear()
64 return res.data
65 },
66 err => {
67 //响应错误
68 Toast.clear()
69 return err
70 }
71)
72
73export default Http
调用方法
1import Http from 'http.js'
2Vue.prototype.$Http = Http
3
4async function(){
5 let res = await this.$Http.api1({id: 4})
6}
7
8async function(){
9 let res = await this.$Http.api2(info,true,config)
10}
