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()
}