axios的使用介绍

axios 配置及使用

• npm使用参考

在线CDN地址

https://unpkg.com/axios/dist/axios.min.js

安装

npm i axios -S

导入

import axios from 'axios'

全局配置

方案一

创建实例的时候传入配置对象

// 创建实例的时候传入配置对象
const $https = axios.create({
  baseURL: 'https://some-domain.com/api/',  // 设置接口地址
  timeout: 1000,                            //设置超时时间
  headers: {'Content-Type': 'application/x-www-form-urlencoded'}  //设置请求头
});

先创建实例对象, 在进行配置

// 先创建实例对象
 const $https = axios.create();
// 再进行配置
$https.defaults.baseURL='https://api.example.com' ;
// 设置超时时间
$https.defaults.timeout = 2500;
// 设置认证请求头
$https.defaults.headers.common['Authorization'] = AUTH_TOKEN;

需要使用实例对象$https发送请求

方案二

// 设置接口地址
axios.defaults.baseURL='http://www.api.com'
// 对提交给服务端的数据进行预处理,将对象{}=>queryString查询字符串的格式;
// 因为默认提交的是json(Content-Type:application/json), 服务端无法对json直接处理
axios.defaults.transformRequest: [function (data, headers) {
    // 对提交给服务端的数据进行预处理
    // data默认为一个对象
    if(typeof(data)=='object'){
        let arr=[];
        for(var key in data){
            arr.push(key+'='+data[key]);    
        }
        // 最终返回的数据格式:name=zs&age=30
        return arr.join('&')
    }
    return data;
  }];
// 设置公共请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 设置post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

使用

发送get请求

axios.get('/user',{
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

发送post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });