Axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

服务器端

使用json-server

1. axios基本使用

// 1.GET axios({     method: 'GET',     url: 'http://localhost:3000/posts/2' }).then(res => {     console.log(res); })  // POST axios({     method: 'POST',     url: 'http://localhost:3000/posts',     data: {         title: 'test',         author: 'lll'    } }).then(res => {     console.log(res); })  // PUT axios({    method: 'PUT',     url: 'http://localhost:3000/posts/3',     data: {         title: 'test',         author: 'new-lll'     } }).then(res => {     console.log(res); })  // DELETE axios({     method: 'DELETE',     url: 'http://localhost:3000/posts/3', }).then(res => {     console.log(res); }) 

2. 其他请求方法

axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])  // request axios.request({     method: 'GET',     url: 'http://localhost:3000/posts/2' }).then(res => {     console.log(res) })  // POST axios.post(     'http://localhost:3000/comments',     {         "body": "other",        "postId": 2     } ).then(res => {     console.log(res) }) 

3. axios默认配置

// default setting axios.defaults.method = 'GET' axios.defaults.baseURL = 'http:localhost:3000' axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 

4. axios创建实例对象

// 创建实例对象 const obj = axios.create({     baseURL: 'http://localhost:3000' }) // obj实例和axios对象几乎相同 obj({    url: 'posts/2' }).then(res => {     console.log(res) }) 

5. axios拦截器

/**  * 拦截器实质是函数  * 请求拦截器，在请求发出时检查请求的参数等是否正确  * 响应拦截器，在接受响应前，对响应进行预处理 */ // 请求拦截器 axios.interceptors.request.use(functio(config) {     console.log('req success')     return config }), function (error) {     console.log('req fail')     return Promise.reject(error) }  // 接收拦截器 axios.interceptors.response.use(functio(response) {     console.log('res success')     return response; }, function (error) {     console.log('res fail')     return Promise.reject(error); }); 

6. 取消请求

let cancel = nul btns[0].onclick = function () {     // 检查上一个请求是否结束     if (cancel !== null) {         cancel()     }     axios({         url: '/posts',         cancelToken: new axios.CancelTok(function executor(c) {             cancel = c;         })     }).then(res => {         cancel = null         console.log(res)     }) btns[1].onclick = function () {     cancel() }