起步 | Axios Docs (opens new window)
GitHub - axios/axios: Promise based HTTP client for the browser and node.js (opens new window)
# 基础调用
axios({
url: 'http://123.207.32.32:8000/home/multidata',
// method: 'post'
}).then(res => {
console.log(res);
})
axios({
url: 'http://123.207.32.32:8000/home/data',
// 专门针对get请求的参数拼接
params: {
type: 'pop',
page: 1
}
}).then(res => {
console.log(res);
})
# 使用全局的 axios 和对应的配置在进行网络请求
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.all([axios({
url: '/home/multidata'
}), axios({
url: '/home/data',
params: {
type: 'sell',
page: 5
}
})])
.then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
# axios 实例
// 4.创建对应的axios的实例
const instance1 = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
instance1({
url: '/home/multidata'
}).then(res => {
console.log(res);
})
instance1({
url: '/home/data',
params: {
type: 'pop',
page: 1
}
}).then(res => {
console.log(res);
})
# axios 封装
// request.js
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 发送真正的网络请求
instance(config.baseConfig)
.then(res => {
// console.log(res);
config.success(res);
})
.catch(err => {
// console.log(err);
config.failure(err)
})
}
// 使用
request({
baseConfig: {
},
success: function (res) {
},
failure: function (err) {
}
})
# axios promise 封装
// request.js
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 发送真正的网络请求
return instance(config)
}
// 使用
request({
url: '/home/multidata'
}).then(res => {
console.log(res);
}).catch(err => {
// console.log(err);
})
# axios 拦截器
拦截器 | Axios Docs (opens new window)
// request.js
import axios from 'axios'
export function request(config) {
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 请求拦截
instance.interceptors.request.use(config => {
// console.log(config);
// 1.比如config中的一些信息不符合服务器的要求
// 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标
// 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
return config
}, err => {
// console.log(err);
})
// 响应拦截
instance.interceptors.response.use(res => {
// console.log(res);
return res.data // 这里只返回了 data,相当于拦截了其它的数据
}, err => {
console.log(err);
})
return instance(config)
}