axios

Table of Contents

• axios
• 一、概述
• 二、使用
• 1、基本使用
• 安装
• 引入
• 请求
• 2、并发请求
• 3、配置信息
• 4、axios实例
• 5、模块封装
• request.js
• main.js
• 引入
• 6、拦截器
• 作用

一、概述

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。简单来说就是前端最火最简单的一个http请求解决方案。

二、使用

• 1、基本使用

• 安装

• npm install axios --save

• 引入

• import axios from 'axios'

• 请求

axios({
  url:'http://123.207.32.32:8000/home/multidata'
  //method:'post' 默认为get请求
}).then(res => {
  console.log(res);
})

• 2、并发请求

axios.all([axios({
  url:'http://123.207.32.32:8000/home/multidata'
}),axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'sell',
    page:5
  }
})]).then(results => {
  console.log(results);
})

• 结果
  
• axios.all([]) 返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开为res1,res2.

axios.all([
  axios.get('http://123.207.32.32:8000/home/multidata'),
  axios.get('http://123.207.32.32:8000/home/data',
      {params:{
              type:'sell',
              page:5
      }})])
      .then(axios.spread((res1,res2) => {
        console.log(res1);
        console.log(res2);
}))

• 结果
  

• 3、配置信息

• 全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

• 其余配置不一一赘述了

• 4、axios实例

const instance1 = axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout: 5000
})
instance1({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
})
instance1({
  url:'/home/data',
  params:{
    type:'pop',
    page:1
  }
}).then(res => {
  console.log(res);
})

• 结果
  

• 5、模块封装

• 首先建立一个文件夹network用于网络请求，在文件夹中建立一个request.js文件
• 

• request.js

import axios from 'axios'

export function request(config){
    //创建实例
    const instance = axios.create({
        baseURL:'http://123.207.32.32:8000',
        timeout: 5000
    })
    //发送网络请求
    return instance(config) //本身就返回的是一个promise
}

• main.js

• 引入

import {request} from "./network/request";

request({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

• 结果
  

• 6、拦截器

    //配置请求
    instance.interceptors.request.use(config => {
        console.log('来到了request拦截success中');
        return config
    }), err => {
        console.log('来到了request拦截failure中');
        return err
    }
    //响应拦截
    instance.interceptors.response.use(response => {
        console.log('来到了response拦截success中');
        return reponse.data
    }), err => {
        console.log('来到了response拦截failure中');
        return err
    }

• 结果
  

• 作用

1. 有时候config中的一些信息不满足服务器要求
2. 发送网络请求时，希望在界面中有一个“正在请求”的图标
3. 有时候发送某些请求时，必须有某种特殊信息，比如说登录(token)

• 这些都需要拦截器的作用

• over!