axios框架学习

从明天开始就是vue的项目实战了，其中网络请求的部分要用axios，所以来学咯
今天这些都很基础，之后还会来补充的

---

安装

npm install axios --save

---

基本使用

import axios from 'axios'

// 默认get请求
axios({
  url: 'http://www.blogry.cn/test/blog'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

// 设置method可发送其他类型请求
axios({
  url: 'http://www.blogry.cn/test/blog',
  // 发送post请求
  method: 'post'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

// 有参数时可以这样发送
axios({
  url: 'http://www.blogry.cn/test/blog',
  // 把参数放在这
  params: {
    title: '我的编程经历'
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

// 当然也可以直接发送
axios({
  url: 'http://www.blogry.cn/test/blog?title=我的编程经历',
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

---

发送并发请求

有时候我们可能需要同时发送两个及以上请求
使用axios.all()，接收一个数组，数组中可以放入多个请求

axios.all([axios({
  url: 'http://www.blogry.cn/test/index'
}),axios({
  url: 'http://www.blogry.cn/test/blog',
  params: {
    title: '我的编程经历'
  }
})]).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

---

全局配置

在上面的示例中，我们的Base URL是固定的
实际上在开发中可能很多参数都是固定的，这时候我们可以进行一些抽取，也可以利用axios的全局配置

// 全局配置
axios.defaults.baseURL = 'http://www.blogry.cn';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.timeout = 5000;

axios({
  // baseURL: 'http://www.blogry.cn';
  url: '/test/index',
}).then(res => {
  console.log(res);
}).catch(err => {
   console.log(err);
})

---

请求配置

http://www.axios-js.com/zh-cn/docs/index.html#请求配置
需要的时候来查文档（因为太多了）

⚠️：
method: 'get' 时设置params:{}
method: 'post'时设置data:{}

---

axios的实例

为什么要创建axios的实例？

• 当我们从axios模块中导入对象时，使用的实例是默认的实例，当给该实例设置一些默认配置时，这些配置就被固定下来了。
• 但是后续开发中，某些配置可能会不太一样，比如某些请求需要使用特定的baseURL或者timeout等
• 这时候我们就可以创建新的实例，并传入属于该实例的配置信息

const instance1 = axios.create({
  // 这个实例独立的配置
  baseURL: 'http://www.blogry.cn',
  timeout: 5000,
})

instance1({
  url: '/test/index',
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

---

axios模块封装

新建src/network/request.js

一种封装：

// request.js
import axios from "axios";

export function request(config, success, failure){
    const instance = axios.create({
        baseURL: 'http://www.blogry.cn',
        timeout: 5000
    })
    instance(config).then(res => {
        success(res);
    }).catch(err => {
        failure(err);
    })
}

调用：

import { request } from './network/request'

request({
  url: '/test/index'
},res => {
  console.log(res);
},err => {
  console.log(err);
})

或者还有一种更优雅的方式封装：

// request.js
import axios from "axios";

export function request(config) {
    return new Promise((resolve, reject) => {
        // 1.创建axios的实例
        const instance = axios.create({
            baseURL: 'http://www.blogry.cn',
            timeout: 5000
        })
        // 2.传入对象进行网络请求 
        // 不是在这里处理结果，把结果传回给调用者
        instance(config).then(res => {
            resolve(res);
        }).catch(err => {
            reject(err);
        })
    })
}

但其实instance实例就会返回一个promise对象，所以也可以写成下面这样，更简洁：

// request.js
import axios from "axios";

export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
    baseURL: 'http://www.blogry.cn',
    timeout: 5000
})
// 2.传入对象进行网络请求 
return instance(config);
}

调用：

import { request } from './network/request'

request({
  url: '/test/index',
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

---

拦截器

axios提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理
在请求或响应被 then 或 catch 处理前拦截它们。

为自定义的实例添加拦截器：

// 添加请求拦截器
instance.interceptors.request.use(config => {
    console.log(config);
    return config;
}, err => {
    console.log(err);
});
// 添加响应拦截器
instance.interceptors.response.use(res => {
    console.log(res);
    return res;
}, err => {
    console.log(err);
});

全局添加拦截器使用：

axios.interceptors.request.use(...);
axios.interceptors.response.use(...);

---

以上用到的接口是在网上看到免费提供的，非常感谢!