Axios
为什么选择axios? 作者推荐和功能特点
![](https://i-blog.csdnimg.cn/blog_migrate/7a34f0de3e466218d364493e76042cd8.png)
功能特点:
- 在浏览器中发送 XMLHttpRequests 请求
- 在 node.js 中发送 http请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
支持多种请求方式:
- axios(config)
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
示例:(为了不破坏老师规矩,ip地址不透露)
import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})
//1.axios的基本使用
axios({
url: 'http://123.207.32.32:8000/home/multidata',
method: 'get'
}).then(res=>{
console.log(res.data)
})
axios({
url: 'http://IP:7878/api/m5/home/data',
//专门针对get请求的参数拼接
params: {
type: 'pop',
page: 1
}
}).then(res=>{
console.log(res.data)
})
//2.axios发送并发请求
axios.all([
axios({
url: 'http://123.207.32.32:8000/home/multidata'
}),
axios({
url: 'http://IP:7878/api/m5/home/data',
//专门针对get请求的参数拼接
params: {
type: 'pop',
page: 5
}
})]).then(
result=>{
console.log(result);
})
// axios.spread() 可将数组 [res1,res2] 展开为 res1, res2
axios.all([
axios({
url: 'http://123.207.32.32:8000/home/multidata'
}),
axios({
url: 'http://ip:7878/api/m5/home/data',
//专门针对get请求的参数拼接
params: {
type: 'pop',
page: 5
}
})]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
全局配置
axios.defaults.baseURL = 'http://IP:7878'
axios.defaults.timeout = 5000
axios.all([
axios({
url: '/home/multidata'
}),
axios({
url: '/api/m5/home/data',
//专门针对get请求的参数拼接
params: {
type: 'pop',
page: 5
}
})]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
常见的配置选项
请求地址
purl: '/user',
请求类型
pmethod: 'get',
请根路径
pbaseURL: 'http://www.mt.com/api',
请求前的数据处理
ptransformRequest:[function(data){}],
请求后的数据处理
ptransformResponse: [function(data){}],
自定义的请求头
pheaders:{'x-Requested-With':'XMLHttpRequest'},
URL查询对象
params:{ id: 12 },
查询对象序列化函数
paramsSerializer: function(params){ }
request body
data: { key: 'aa'},
超时设置s
timeout: 1000,
跨域是否带Token
withCredentials: false,
自定义请求处理
adapter: function(resolve, reject, config){},
身份验证信息
auth: { uname: '', pwd: '12'},
响应的数据格式 json / blob /document /arraybuffer / text / stream
responseType: 'json',
axios的实例
为什么要创建axios的实例呢?
- 当我们从axios模块中导入对象时, 使用的实例是默认的实例.
- 当给该实例设置一些默认配置时, 这些配置就被固定下来了.
- 但是后续开发中, 某些配置可能会不太一样.
- 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
- 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.
//4.创建对应的axios的实例
const instance1 = axios.create({
baseURL: 'http://IP/api/m5',
timeout: 5000
})
instance1({
url: '/home/multidata'
}).then(res=> {
console.log("instance1",res);
})
instance1({
url: '/home/data',
params: {
type: 'pop',
page: 1
}
}).then(res=>{
console.log("instance1",res)
})
const instance2 = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
instance2({
url: '/home/multidata'
}).then(res=>{
console.log("instance2",res)
})
axios封装
创建一个文件夹network 并且创建一个request.js 文件
import axios from 'axios'
//方法四
export function request(config) {
//创建axios的实例
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
//发送真正的网络请求
return instance(config); //本身返回值就是Promise
}
//方法三
/*export function request(config) {
return new Promise((resolve,reject)=>{
//创建axios的实例
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
//发送真正的网络请求
instance(config)
.then(res =>{
resolve(res)
})
.catch(err=>{
reject(err)
})
})
}*/
//方法二
// export function request(config) {
// //创建axios的实例
// const instance = axios.create({
// baseURL: 'http://152.136.185.210:7878/api/m5',
// timeout: 5000
// })
//
// //发送真正的网络请求
// instance(config.baseConfig)
// .then(res =>{
// // console.log(res)
// config.success(res);
// })
// .catch(err=>{
// // console.log(err)
// config.failure(err);
// })
// }
//方法一
// export function request(config,success,failure) {
// //创建axios的实例
// const instance = axios.create({
// baseURL: 'http://152.136.185.210:7878/api/m5',
// timeout: 5000
// })
//
// //发送真正的网络请求
// instance(config)
// .then(res =>{
// // console.log(res)
// success(res);
// })
// .catch(err=>{
// // console.log(err)
// failure(err);
// })
// }
function test(aaa, bbb) {
aaa("hello world"),
bbb('adwasd')
}
test(function (param) {
console.log(param)
}, function (paramB) {
console.log(paramB)
})
在main.js中引用即可
//5.封装request模块
import {request} from "./network/request";
//方法一
// request({
// url: '/home/multidata'
// },res=>{
// console.log(res)
// })
//方法二
// request({
// baseConfig: {},
// success: function (res) {
// console.log(res);
// },
// failure: function (err) {
// console.log(err);
// }
// })
//方法三/方法四
request({
url: '/home/multidata'
}).then(res=>{
console.log(res)
}).catch(err => {
console.log(err)
})
如何使用拦截器
export function request(config) {
//1.创建axios的实例
const instance = axios.create({
baseURL: 'http://152.136.185.210:7878/api/m5',
timeout: 5000
})
//2.axios的拦截器
//2.1请求拦截的作用
instance.interceptors.request.use(
config=> {
console.log(config);
//1.比如config中的一些信息不符合服务器的要求
//2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
//3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
return config;
},error => {
console.log(error);
}
);
//2.2响应拦截
instance.interceptors.response.use(
res => {
// console.log(res)
return res.data;
},
error => {
console.log(error);
}
);
//3.发送真正的网络请求
return instance(config); //本身返回值就是Promise
}