本文共 2937 字，大约阅读时间需要 9 分钟。

安装

安装axios可以通过以下命令执行：

npm install axios --save-dev

配置

在项目根目录下创建axios.js文件，并添加如下配置：

import axios from 'axios';// 设置默认请求头axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 添加请求拦截器axios.interceptors.request.use(function (config) {    const publicPath = [/^\/public/, /^\/login/];    let isPublic = false;    publicPath.map(path => {        isPublic = isPublic || path.test(config.url);    });    const token = sessionStorage.getItem('token');    if (!isPublic && token) {        config.headers.Authorization = 'Bearer ' + token;    }    if (config.method === 'get' && config.params) {        const keys = Object.keys(config.params);        let url = config.url;        for (let key of keys) {            url += `${key}=${encodeURIComponent(config.params[key])}&`;        }        url = url.substring(0, url.length - 1);        config.params = {};    }    config.url = url;    return config;}, function (error) {    return Promise.reject(error);});// 添加响应拦截器axios.interceptors.response.use(function (response) {    return response;}, function (error) {    return Promise.reject(error);});

在src/main.js中导入axios并赋值：

import axios from 'axios';import './axios.js';Vue.prototype.$http = axios;

get 请求

如何发送get请求：

this.$http({    method: 'get',    url: 'http://jsonplaceholder.typicode.com/users',    params: {        id: 1    }}).then(res => {    this.user1 = res.data;});

post 请求

如何发送post请求：

this.$http({    method: 'post',    url: 'https://jsonplaceholder.typicode.com/posts',    data: {        name: '朝阳',        sex: '男'    }}).then(res => {    this.$message.success(res.msg);});

并发请求

如何实现并发请求：

function getUserAccount() {    return this.$http.get('/user/12345');}function getUserPermissions() {    return this.$http.get('/user/12345/permissions');}this.$http.all([getUserAccount(), getUserPermissions()])    .then(this.$http.spread(function (acct, perms) {        // 所有请求都完成后执行此回调    }));

获取图片

如何获取图片文件：

this.$http({    method: 'get',    url: 'http://bit.ly/2mTM3nY',    responseType: 'stream'}).then(function (response) {    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'));});

请求配置

完整的请求配置示例：

{    url: '/user',    method: 'get',    baseURL: 'https://some-domain.com/api/',    headers: {        'X-Requested-With': 'XMLHttpRequest'    },    params: {        ID: 12345    },    paramsSerializer: function (params) {        return Qs.stringify(params, { arrayFormat: 'brackets' });    },    data: {        firstName: 'Fred'    },    timeout: 1000,    withCredentials: false,    auth: {        username: 'janedoe',        password: 's00pers3cret'    },    responseType: 'json',    responseEncoding: 'utf8',    maxContentLength: 2000,    proxy: {        host: '127.0.0.1',        port: 9000,        auth: {            username: 'mikeymike',            password: 'rapunz3l'        }    }}

转载地址：http://qqmkk.baihongyu.com/