一. axios 是什么
axios 在 web 前端或者 nodejs 后台都可以使用的/用来发送 http 请求的库
对于使用者而言, 它在前端或者 node.js 后台中的使用方法/api几乎是完全一致的
原理是根据在全局环境中是否有 XMLHttpRequest 或 process 对象来判断是在浏览器环境还是 nodejs 环境中, 从而调用封装的不同的请求方法
下面是axios源码区分前后台环境的代码
// ./lib/default.js 下, 适配前端或 nodejs 端的代码
function getDefaultAdapter() {
var adapter;
if (typeof XMLHttpRequest !== 'undefined') {
// For browsers use XHR adapter
adapter = require('./adapters/xhr');
} else if (typeof process !== 'undefined') {
// For node use HTTP adapter
adapter = require('./adapters/http');
}
return adapter;
}
二. 使用方法
需要引入的库
- axios
- 没有了
在命令行运行 npm i axios 下载 axios
- 在 nodejs 环境下:
const axios = require('axios')
const fs = require('fs')
- 在前端环境下
import axios from 'axios'
- 直接引入 cdn 的axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
需要注意的是: 前端环境没有fs库
这里使用一个 log , 来代替 console.log
const log = console.log.bind(console)
后台调试设置
为了方便地调试axios, 准备了一个用 express 撸的5毛钱后台服务
代码在这里 https://github.com/xianjiezh/axios-demo/blob/master/server.js
使用方法: npm i express body-parser 后, 再命令行运行 node server.js
就会在本地开启一个端口 (3000) 提供调试
1. 发送 GET 请求
// 1. 在 url 里面携带参数
axios.get('http://localhost:3000/user?ID=12345')
.then(res => {
log('res1', res.data)
})
.catch(error => {
log('error1', error)
})
// 2. 将参数放到一个对象里面, axios会在内部将其拼接成上面的 url
// 和上面的请求是一样的
axios.get('http://localhost:3000/user', {
params: {
ID: 12345
}
}).then(res => {
log('res2', res.data)
}).catch(error => {
log('error2', error)
})
// 3. 类似 jQuery 的写法, 传一个对象进去
// 注意, 这必须在服务端运行, 因为浏览器端没有 fs
// 这个请求会在当前目录创建一个图像文件
axios({
method: 'get',
url: 'http://bit.ly/2mTM3nY',
responseType: 'stream'
})
.then(response => {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
})
2. 发送 POST 请求
// 1. 第二个参数放数据
axios.post('http://localhost:3000/user', {
firstName: 'hh',
lastName: 'xx'
})
.then(res => {
log('res3', res.data)
})
.catch(error => {
log('error3', error)
})
// 2. 类似 jQuery 的方式
axios({
method: 'post',
url: 'http://localhost:3000/user',
data: {
firstName: 'mmmmmmmmm',
lastName: 'nnnnnnnnnn'
}
})
.then(res => {
log('res4', res.data)
})
.catch(error => {
log('error4', error)
})
3. 并行请求
// then 里面回调函数内的第 n 个参数分别是第 n 个请求返回的数据
const request1 = function() {
return axios.get('http://localhost:3000/random1')
}
const request2 = function() {
return axios.get('http://localhost:3000/random2')
}
axios.all([request1(), request2()])
.then(axios.spread((res1, res2) => {
log('res1', res1.data)
log('res2', res2.data)
}))
创建一个实例
const instance = axios.create({
baseURL: 'http://127.0.0.1:3000/',
timeout: 3000,
})
// 实例的使用方法
instance.get('/user')
.then(response => {
log(response.data)
log(response.status)
log(response.statusText)
log(response.headers)
log(response.config)
}).catch(error => {
log('error', error.message)
})
因为在创建实例的时候指定了 baseURL(注意URL这三个字母是大写的), 所以后面再使用这个实例请求时只需要加一个路径就可以了
配置
// 全局 axios 的配置
axios.defaults.baseURL = 'http://127.0.0.1:3000/'
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 在创建实例时配置实例的选项
const instance = axios.create({
baseURL: 'http://127.0.0.1:3000/'
})
// 在创建实例后也可以指定默认选项
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN
// 配置先后顺序
// 在创建实例时, 如果不传入参数, axios 也会使用它的默认项
const instance = axios.create()
// 下面的配置会去覆盖 axios 默认的配置
// 请求的等待事件将会是 2.5s
instance.defaults.timeout = 2500
// 当次请求的 timeout 事件也可以设置
instance.get('/longRequest', {
timeout: 5000
})
拦截器
可以设置对请求和响应的拦截(相当于一个中间件, 想想 express 的中间件)
axios.interceptors.request.use(config => {
// config 包含发送出的数据, 可以在这里修改
// 下面随机将请求方法改成 POST
return config
}, error => {
return Promise.reject(error)
})
axios.interceptors.response.use(res => {
// 这里随机修改返回的数据
if (Math.random() > 0.5) {
res.data.message = 'hhhhhhhh'
}
return res
}, error => {
// 可以对返回的 error 进行处理
return Promise.reject(error)
})
// 移除拦截器
const myInterceptor = axios.interceptors.request.use(res => {
//
})
axios.interceptors.request.eject(myInterceptor)
// 实例的拦截器
const instance = axios.create()
instance.interceptors.request.use(res => {
//
})
错误处理
axios.post('/user', {
})
.catch(error => {
if (error.response) {
// 由服务端触发的错误, 例如 404 502 一类
// 状态码不在 [200, 300) 这一区间就会触发
log('error.response', error.response)
} else if (error.request) {
// 已经发出了请求但是没有收到请求会触发此错误
// error.request 在浏览器端是 XMLHttpRequest 的实例
// 在 node.js 端是 http.clientRequest 的实例
log('error.request', error.request)
} else {
// 在准备请求时(尚未发出)触发的错误
log('error', error.message)
}
})
// 指定触发错误的 HTTP 状态码
axios.get('/user', {
validateStatus: status => {
// 这样就只会在状态码大于等于500时抛出错误
return status < 500
}
})
.then(res => {
log('res', res.data )
})
取消请求
使用 cancel token 取消请求
const CancelToken = axios.CancelToken
const source = CancelToken.source()
// 这是一个可以被取消的请求
axios.get('/user', {
cancelToken: source.token
}).then(res => {
log('res', res.data)
}).catch(error => {
if (axios.isCancel(error)) {
// 请求被取消
log('cancel message ', error.message)
} else {
log('error', error)
}
})
// 取消这个请求
source.cancel('user canceled this request')
// 以 POST 方法发送
axios.post('/user', {
name: 'new name'
}, {
cancelToken: source.token
})
// 取消这次的请求
source.cancel('user canceled this request')
// 创建 cancel token
const CancelToken = axios.CancelToken
let cancel
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
cacel = c
})
})
cancel()
网友评论