一.axios与ajax区别
相同点:都是执行异步请求操作
不同点:
- 大小
- axios体积小 只需在要使用的目录下 npm install axios --save
- ajax 需要导入jQuery【体积较大 只是为了ajax去引入是不值得的】
- 针对方向
- axios 符合前端MVVM的浪潮
- ajax 本身是针对MVC的编程
- 实现方法与返回值
- axios 用promise技术实现对ajax技术的封装 返回值是 promise
- ajax 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
- 对并发请求的封装api
二.axios应用
1. 安装axios 打开需要使用的路径下的命令行
npm install axios --save
2. 在需要使用 axios 的地方导入
import axios from 'axios'
3. axios实例使用
- 创建实例
- axios可直接使用 axios(config) 但还是推荐创建实例,因为可以对实例进行单独配置,下方讲解
axios({
url:'服务器url',
method:'请求方式' ,
params:{
name:'cc',
age:'18'
}
}).then(res=>{
console.log(res)
})
- axios.all([ ]) 一次执行多个请求【并发请求】
axios.all([axios({
//第一个请求参数
}), axios({
//第二个请求参数
})])
.then(results => {
//返回值数组 分别是一与二请求的结果
console.log(results)
})
- 设置默认配置【默认属性 可在使用时省略 类似父类】
axios.defaults.baseURL = '默认路径'
axios.defaults.timeout = 5000
***注意:method:get 请求参数对应 params:{ name:'cc'}
method:post 请求参数对应 data:{ name:'cc'}
4. 创建实例-配置
- 原因
- 项目中要请求多个不同url获取数据 因此每个的使用baseUrl 不一定相同。
- axios是全局的 如果直接使用修改 很可能出现问题
- 使用
- 调用axios.create(config)的 api实现创建实例-【其中config为上面的obj对象】
const instance = axios.create({
baseURL : '请求路径',
timeout : 5000
})
三、应用于vue 封装request方法
最后对其进行封装requset函数-【为了直接在其他地方直接使用】(分三步)
- 创建实例
- 放置默认配置 baseURL等
- 增加拦截器
- 可以对访问请求 与 响应拦截操作 对数据进行二次加工
- 返回网络请求
- 返回promise对象 完成封装
- 在外部使用.then()继续实现下一步操作
export function request(config) {
//1.创建axios实例
const instance = axios.create({
baseURL: '',
timeout: 5000
})
//2.axios拦截器
//2.1请求拦截
instance.interceptors.request.use(config=>{
//拦截操作
return config //必须返回回去 否则调用处取不到
},err=>{
//console.log(err)
})
//2.2响应拦截
instance.interceptors.response.use(res=>{
//拦截操作
return res //必须返回回去 否则调用处取不到
},err=>{
//console.log(err)
})
//3发送真正的网络请求【返回promise对象】
return instance(config)
}
转载与https://www.cnblogs.com/cc123nice/p/12593857.html