2021-03-20

Axios是什么？Axios的封装及使用？

什么是Axios?
Axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中，用来发送网络请求。

Axios的优点？

1. 支持发送ajax异步请求
2. 支持在node.js发送ajax异步请求
3. 支持promise，它内部本身就返回一个Promise
4. 支持拦截器请求和响应
5. 支持对请求和响应的数据做处理

Axios的使用?

1. Axios所支持的请求方法本身只有两个：
   axios(config)和axios(url,[config])

2. 向Axios传递相关配置来创建请求

// 1.axios(config)
axios({
  url: 'http://123.207.32.32:8000/home/data',
  // 默认为get请求
  // method: 'get'
  //专门针对get请求的参数拼接
  params: {
    type: 'pop',
    page: 1
  }
  //axios内部支持promise
}).then(res => {
  console.log(res);
})

注：axios(config)和axios(url,[config])中的[]中内容可以不写，但是不带[]的是必写项

// 2.Axios(url,[config])
// 发送get请求 （默认的方法）
axios( 'http://123.207.32.32:8000/home/data');

3. Axios还提供了以下几种请求方式：

// 1.axios.all 发送并发请求
// 为了方便发送请求，可以先进行一个全局配置
 axios.defaults.baseURL = 'http://123.207.32.32:8000';
  axios.all([axios({
  url: '/home/multidata',
}),
axios({
  url: '/home/data',
  params: {
    type: 'sell',
    page: 3
  }
})
]).then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
})
)
// 2.axios.post() 发送post请求
axios.post( '/home/data',{
params: {
    type: 'sell',
    page: 3
    }
// 此外还有put请求，patch请求，delete请求

 - get：获取数据，请求指定的信息，返回实体对象
 - post：向指定资源提交数据（例如表单提交或文件上传）
 - put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容 
 - patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
 - delete：请求服务器删除指定的数据

Axios的封装？

1. 创建Axios的实例
2. Axios的拦截
   2.1. 请求拦截
   2.2. 响应拦截
3. 发送真正的网络请求 它本身返回一个promise

在实际项目中，一般是在src文件目录下新建一个network文件夹，在network文件夹中新建request.js文件，目录结构如下：

在request.js文件中引入安装好的axios,(前提是安装好的）

import axios from 'axios'
export function request(config) {
    //1.创建axios的实例
    const instance = axios.create({
        baseURL: 'http://152.136.185.210:7878/api/m5',
        timeout: 5000
    })
    //2.axios的拦截器
    //2.1.请求拦截
    instance.interceptors.request.use(config => {
        // console.log(config);
        return config
    }, err => {
        console.log(err);
    })
    //2.2.响应拦截
    instance.interceptors.response.use(res => {
        // console.log(res);
        return res.data
    }, err => {
        console.log(err);
    })
     //3.发送真正的网络请求 它本身返回一个promise
    return instance(config)
}

 

4. 接下来把将要请求的页面的数据单独做一个封装，一般是放在与request.js同层级的文件下，比如（home.js），这样安排目录文件便于后期管理
   以home.js文件为例，在home.js引入request.js文件，然后请求数据

import { request } from './request'
export function getHomeGoods(type, page) {
    return request({
        url: '/home/data',
        params: {
            type,
            page
        }
    })
}

5. 接下来在组件中获取数据

getHomeGoods(type) {
      //请求商品数据
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        // console.log(res);
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
        this.$refs.scroll.finishPullUp();
      });
    },