Axios简单使用1. 介绍 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js

1. 介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

2. get / post 请求

get请求

Axios默认请求方式为get

通过向 axios 传递相关配置来创建请求

axios({
    url: '/user',
    method: 'get',
    params: {
      id: '123'，
      name: '321'
    }
}).then(res => console.log(res))

使用get方法，请求参数直接写在url中

axios.get('/user?id=123&name=321')
.then(res => console.log(res))

使用get方法，请求参数写在params对象中

axios.get('/user', {
    params: {
      id: '123'，
      name: '321'
    }
}).then(res => console.log(res))

post 请求

axios的post请求的content-type默认为 application/json

通过向 axios 传递相关配置来创建请求，使用data对象传参

axios({
    url: '/user',
    method: 'post',
    headers: {
        'Content-Type': 'application/json'
    },
    data: {
      id: '12345'，
      name: 'xiaoming'
    }
}).then(res => console.log(res))

使用post方法

var data = {
      id: '123'，
      name: '321'
    };
axios.post('/user', data, {
       headers: {
        'Content-Type': 'application/json'
    }
}).then(res => console.log(res))

3. 并发请求

使用 axios.all() 执行并发请求,接收可迭代对象，axios.spread() 执行逻辑处理，接收回调函数，该回调函数参数为响应内容。这两个方法都是静态方法，不是axios实例的方法。

function getUser1() {
  return axios.get('/user/123');
}

function getUser2() {
  return axios.get('/user/345');
}

axios.all([getUser1(), getUser2()])
  .then(axios.spread((res1,res2)=>{
      console.log(res1);
      console.log(res2);
  }));

4. 全局配置

修改axios.default对象(就是一个请求配置对象)上的属性，进行全局配置

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';

5. 创建实例并配置

创建实例 axios.create([config])，所创建的实例的使用方法和使用axios相同

let instance = axios.create({
    baseURL: 'xxx',
    timeout: 5000
})
instance.get('xxx')
instance({url:'xxx})

5. 拦截器 interceptor

拦截器作用：在请求或响应被 then 或 catch 处理前拦截它们。

作用举例：

请求方向：给请求添加token,可根据请求的url拦截特定请求
响应方向：失败的情况下根据响应的状态码给出不同的提示语

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log('进入请求方向拦截器')
    return config;
  }, function (error) {
    // 对请求错误做些什么
    console.log('请求方向失败')
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    console.log('进入响应方向拦截器')
    return response;
  }, function (error) {
    // 对响应错误做点什么
    console.log('响应方向失败')
    return Promise.reject(error);
  });

Promise.reject()方法返回一个带有拒绝原因的Promise对象。

Promise.reject(new Error('fail')).then(resolved, rejected);
// expected output: Error: fail

6. 在Vue中引入axios

main.js

//引入axios模块(需提前引入或安装）
import axios from 'axios'
//将axios挂载在vue原型链上
Vue.prototype.$axios = axios;

7. POST三种content-type请求写法

1. Content-Type: application/json

此为默认值，无需修改配置。

参数形式：

2. Content-Type: application/x-www-form-urlencoded

一般用于表单提交。所提交内容通过 & 连接，key1=val1&key2=val2

请求：使用qs.stringify对data进行处理

import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(`user/test/testRequest`,qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})

3. Content-Type: multipart/form-data

这是一个多部份多媒体类型，支持文件上传

请求： data为 FormData 实例，通过 append 方法接收键与值。

import axios from 'axios'
let data = new FormData();
data.append('code','1234');
data.append('name','yyyy');
axios.post(`user/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})