这里写自定义目录标题
一、 axios简介
功能特点:
1、在浏览器中发送XMLHttpRequests 请求
2、在node.js中发送http请求
3、支持Promise API
4、拦截请求和响应
5、转换请求和响应数据
二、项目中安装axios库,在组件中想要网络请求时先引入axios
cnpm install axios -S
模块中引用:
import axios from ‘axios’
三、使用方法
1、发送简单的 get请求,发送post请求需要进一步处理,参考:https://blog.csdn.net/qq_41000891/article/details/82902294
1.1 基本用法,默认get
axios({
url:"请求数据的服务器地址",
method:"get",
timeout:5,
}).then(res=>{
"对res进行操作"
})
1.2 发送get请求时 地址带有问号?及参数,例如 “http://123.207.32.32:8000/home/data?type=sell&page=3”,用下面的请求方式,axios发送请求时 会自动拼接params里的参数
axios({
url:"http://123.207.32.32:8000/home/data?",
timeout:5,
params:{ //注意post请求 要用data传参
type:sell,
page:3
},
}).then( )
2、axios发送并发请求
axios.all( [ axios(),axios()] ).then(results=>{ '操作results' }) //results也是一个数组[res1,res2]
也可以调用spread方法,将结果展开:
axios.all( [ axios(),axios()] ).then(axios.spread((res1,res2)=>{
console.log(res1)
console.log(res2)
}))
3、全局配置axios 相关信息
在axios的参数里有一些多次重复使用的参数,可以进行全局初始化设置,这样在后续调用时,就不用再写重复的代码
例如 url 可以用 axios.defaults.baseURL="http://123.207.32.32:8000”
例如请求时间: axios.defaults.timeout
这样设置初始化参数后可以调用
axios({ // 请求时间可以省略
url:"/home/data?" //前面重复的地址可以省略
params:{
type:sell,
page:3
}
})
四、axios 创建实例和模块封装
1、创建实例
const axios1 = axios.create({
basURL:"http://123.207.32.32:8000",
timeout:3000
})
axios1({
url:"/home/data?",
params:{...}
}).then()
// 再次调用(url换成其他路由)
axios1({
url:"/home/list"
}).then()
2、axios模块封装 4中封装方法
因为如果以后axios这个http库不再维护,在项目中就需要改动很多地方,而封装成自己的模块就可以解决这种问题
单独创建一个文件夹network,在文件夹里创建request.js文件
在这里写代码
2.1、
import axios from "axios"
export function (config,success,failure){ //config是一个包含参数的对象,success和failure是两个回调函数
//创建axios实例
const instance = axios.create({
baseURL:"...",
timeout:3000
})
instance(config).then(
console.log(res);
success(res)
).catch(err=>{
console.log(err)
failure(err)
})
}
在其它地方调用时
先导入
import {request} from "./network/request"
request({
url:"...",
},res=>{},err=>{})
2.2
也可以在封装时 把形参变成一个对象
import axios from "axios"
import axios from "axios"
export function (config){ //config是一个包含参数的对象,success和failure是两个回调函数
//创建axios实例
const instance = axios.create({
baseURL:"...",
timeout:3000
})
instance(config.baseConfig).then(
console.log(res);
config.success(res)
).catch(err=>{
console.log(err)
config.failure(err)
})
}
在其它地方调用时
先导入
import {request} from "./network/request"
然后调用:
request({
baseConfig:{...},
success:function(res){ },
failure:function(err){ },
})
2.3、
import axios from "axios"
export function (config){ //config是一个包含参数的对象,success和failure是两个回调函数
return new Promise((resolve,reject)=>{
//创建axios实例
const instance = axios.create({
baseURL:"...",
timeout:3000
})
//instance本身就是Promise
instance(config).then(res=>{ //参考二阶段Promise笔记
resolve(res))
}).catch(err=>{
reject(err))
})
})
}
在其它地方调用时
先导入
import {request} from "./network/request"
然后调用:
request({
url:"...",
}).then(res=>{ }).catch(err=>{ })
2.4、
其实上面的代码中可以不用Promise,直接return instance(config) 因为
instance(config) 本身就是Promise对象
import axios from "axios"
export request1=function (config){ //config是一个包含参数的对象,success和failure是两个回调函数
//创建axios实例
const instance = axios.create({
baseURL:"...",
timeout:3000
}) //创建好instance实例后就可以调用instance()了,括号里填写路由地址和参数
//instance本身就是Promise
return instance(config)
}
在其它地方调用时
先导入
import {request1} from "./network/request"
然后:
request1({
url:"...",
}).then(res=>{ }).catch(err=>{ })
五、axios拦截器
1、请求成功、请求失败、响应成功、响应失败都可以拦截
import axios from "axios"
export request1=function (config){ //config是一个包含参数的对象,success和failure是两个回调函数
//1、创建axios实例
const instance = axios.create({
baseURL:"...",
timeout:3000
}) //创建好instance实例后就可以调用instance()了,括号里填写路由地址和参数
// 2、axios的拦截器(这里在实例中应用,也可以在全局中使用)
分类:
instance.interceptors.request; //发送请求时拦截
instance.interceptors.response;//响应时拦截,服务器返回数据时
请求拦截的使用:
.use()方法 拦截后使用拦截的数据
use()里第一个参数是请求成功时的回调函数,第二个是失败时的回调函数
请求拦截成功时的回调函数必须要有返回值,拦截后要返回的
instance.interceptors.request.use(config=>{ //config为要传给服务器的参数
return config
//这里可以做什么事?
1、发送网络请求时可以添加请求的图标动画(圆圈),在返回响应时取消
2、每次登录时必须携带特殊信息:token令牌等,在这里判断有没有token,然后进行后续处理
},err=>{})
响应拦截的使用
instance.interceptors.response.use(res=>{//res为服务器返回的数据,(返回的数据中axios模块会添加一些额外的数据)
return res
},err=>{
})
//3、返回instance ,instance()本身就是Promise
return instance(config)
}
#六、封装
import { AxiosRequestConfig } from ‘axios’;
declare const request: {
(setting: AxiosRequestConfig): any;
REQ_TYPE: {
URL: string;
JSON: string;
NO: string;
};
beforeRequest: (cbFun: Function) => void;
beforeResponse: (cbFun: Function) => void;
};
export default request;