博客
关于我
vue 异步网络请求 axios 【实用教程】
阅读量:775 次
发布时间:2019-03-24

本文共 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/

你可能感兴趣的文章
MySQL 备份 Xtrabackup
查看>>
mYSQL 外键约束
查看>>
mysql 多个表关联查询查询时间长的问题
查看>>
mySQL 多个表求多个count
查看>>
mysql 多字段删除重复数据,保留最小id数据
查看>>
MySQL 多表联合查询:UNION 和 JOIN 分析
查看>>
MySQL 大数据量快速插入方法和语句优化
查看>>
mysql 如何给SQL添加索引
查看>>
mysql 字段区分大小写
查看>>
mysql 字段合并问题(group_concat)
查看>>
mysql 字段类型类型
查看>>
MySQL 字符串截取函数,字段截取,字符串截取
查看>>
MySQL 存储引擎
查看>>
mysql 存储过程 注入_mysql 视图 事务 存储过程 SQL注入
查看>>
MySQL 存储过程参数:in、out、inout
查看>>
mysql 存储过程每隔一段时间执行一次
查看>>
mysql 存在update不存在insert
查看>>
Mysql 学习总结(86)—— Mysql 的 JSON 数据类型正确使用姿势
查看>>
Mysql 学习总结(87)—— Mysql 执行计划(Explain)再总结
查看>>
Mysql 学习总结(88)—— Mysql 官方为什么不推荐用雪花 id 和 uuid 做 MySQL 主键
查看>>