Axios-HTTP请求库的使用

发表于:2017-09-23

axios 浏览器支持情况

客户端安装axios

<script src="//cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>

使用npm安装axios

npm install axios --save

发送一个GET请求

// 第一个参数是请求地址, 第二个参数是一个对象,params是一个发送URL参数
// 请求示例:/fetch?name=xiejiahe
// GET请求第二个参数要不要无所谓,你可以在请求地址拼接参数, 但是有点麻烦。

axios.get('/fetch', {
        params: {
            name: 'xiejiahe'
        }
    })
    .then(res => {
    // 请求成功后要做什么?(注意axios默认是application/json; charset=utf-8,如果后端返回其他数据类型会报错)
        console.log(res)
    })
    .catch(e => {
    // 失败后要做什么? 一般是请求地址有误或超时等
        console.log(e)
    })

发送一个POST请求, 跟GET有点相似

// 注意了第二个参数是data,和body一起发送的数据

axios.post('/fetch', {
            name: 'xiejiahe'
    })
    .then(res => {
    // 请求成功后要做什么?(注意axios默认是application/json; charset=utf-8,如果后端返回其他数据类型会报错)
        console.log(res)
    })
    .catch(e => {
    // 失败后要做什么? 一般是请求地址有误或超时等
        console.log(e)
    })

除了GET/POST 还支持,用法是基本是相似

不要只用GET和POST, 多用用delete, put 遵循REST API 设计思想。

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]])

axios底层配置,他相当于jquery($.ajax)


axios({
    // 请求地址
    url: '/fetch',

    // 请求方法,默认GET,不区分大小写,推荐大写
    method: 'GET',

    // 会被添加到URL中,比如 http://www.xiejiahe.com/fetch ,你可以理解为换了请求地址
    baseURL: 'http://www.xiejiahe.com',

    // 请求头, 可以更改默认的头,axios默认是不带X-Requested-With
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        ContentType: 'text/plain',
    },

    // 很多人不理解params和data的区别,params是GET请求的参数
    params: {
        name: 'XieJiaHe'
    },

    // 而dadta是POST请求的参数是不带在URL地址里的
    data: {
        name: 'XieJiaHe',
    },

    // 设置请求超时时间, 会在catch捕获
    timeout: 3000,

    // 身份验证,如果你的请求地址是需要用户名和密码的话
    auth: {
        username: 'xiejiahe',
        password: 'root'
    },

    // 响应类型,默认是json的
    // 支持的类型:'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' 
    responseType: 'json',

    // 最大Content-Length, 这个是请求头
    maxContentLength: 3000,

    // 代理
    proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: {
            username: 'your username',
            password: 'your password'
        }
    },
    // 允许修改请求的数据在发送到服务
    // 只适用于 'PUT'、'POST'、'PATCH' 请求
    // 函数必须返回字符串或ArrayBuffer、 FormData或Stream
    transformRequest: [function (data, headers) {
        // 你可以在这里处理你想要的数据
        return data;
    }],
    // 修改响应数据
    transformResponse: [function (data) {
        // 你可以在这里处理你想要的数据
        return data;
    }],
})

全局配置

// 配置请求URL
axios.defaults.baseURL = 'https://www.xiejiahe.com';

// 每次请求带上的头信息
axios.defaults.headers.common['x-access-token'] = 'token';

// 只有post的时候才带上的头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 请求超时时间
axios.defaults.timeout = 5000;

拦截器已有另一篇文章,点击这里

Node.js JavaScript
广告