axios
axios的安装
npm install axios --save
使用
axios({
url: 'http://www.blogry.cn/test/index',
methods: 'post'
}).then(result => {
console.log(result);
})
all 方法
axios.all([
axios({
url: 'http://www.blogry.cn/test/index',
methods: 'post'
}),
axios({
url: 'http://www.blogry.cn/test/blog',
params: {
title : '我的编程经历'
},
methods: 'post'
}),
]).then(result => {
console.log(result[1].data[0].title);
})
全局配置
axios.defaults.timeout = 5000
axios.all([
axios({
url: 'http://www.blogry.cn/test/index',
methods: 'post'
}),
axios({
url: 'http://www.blogry.cn/test/blog',
params: {
title : '我的编程经历'
},
methods: 'post'
}),
]).then(result => {
console.log(result[1].data[0].title);
})
常见的配置选项
请求地址
url: "/user',
请求类型
method: 'get',
请求根路径
baseURL: 'http://www.mt.com/api',
请求前的数据处理
transformRequest:[function(data){}],
请求后的数据处理
transformResponse: [function(data){}].
自定义的请求头
headers:{'x-Requested-With: XMLHttpRequest'),
参数
params:{ id: 12 },
查询对象序列化函数
paramsSerializer: function(params){ }request body
data: { key: 'aa'},
超时设置
timeout: 1000,
跨域是否带Token
withCredentials: false,
自定义请求处理
adapter: function(resolve, reject, config)0.身份验证信息
auth: { uname: ", pwd: '12],
响应的数据格式json / blob /document /arraybuffer / text/ stream
responseType: 'json',
实例
-
当我们服务器不止一个 ip 地址不同时 , 我们可以通过创建实例的方式来进行不同的请求操作
-
通过 axios.create({})
创建实例
const instance1 = axios.create({
baseURL: 'http://www.blogry.cn',
timeout: 5000
})
const instance2 = axios.create({
baseURL: 'http://www.hahha.cn',
timeout: 5000
})
-
使用实例
axios.all([
instance1({
url: '/test/index'
}),
instance1({
url: '/test/blog',
params: {
title: '我的编程经历'
}
}),
]).then(result => {
console.log(result[1].data[0].title);
console.log(result);
})
封装 axios
-
我们最好将发送请求的操作封装起来 , 统一进行操作
-
封装 axios
我们创建一个文件夹 network
在其中创建一个 reqeust
文件
import axios from 'axios'
export function request(config){
return new Promise((resolve, reject) => {
const instance1 = axios.create({
baseURL: 'http://www.blogry.cn/',
timeout: 5000
})
instance1(config)
.then(result => {
resolve(result)
})
.catch(error => {
reject(error)
});
})
}
使用
import {request} from './network/request'
request({
url: '/test/blosg',
params: {
title: '我的编程经历'
}
}).then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})
-
我们可以直接返回 instance
因为 instance
本身返回的就是一个 Promise
import axios from 'axios'
export function request(config){
const instance1 = axios.create({
baseURL: 'http://www.blogry.cn/',
timeout: 5000
})
return instance1(config)
}
import {request} from './network/request'
request({
url: '/test/blog',
params: {
title: '我的编程经历'
}
}).then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})