axios

简介

1. 什么是axios

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

2.安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1. axios基本使用

为了更好的演示，我们用Vue脚手架进行演示

准备工作:

1. 安装axios
2. 在main.js导入axios

注册之后我们就可以使用axios，发送请求了

代码：

// 简单的使用
axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}).then(res => {
  console.log(res)
})

这样我们就能获取到服务器中的数据

如果我们想进行post请求只需要在方法里添加一个method方法就可以了

// 简单的使用
axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  method: 'post'
}).then(res => {
  console.log(res)
})

注意：如果我们使用上面这个方法,如果不加method默认使用GET方法

我们也可以使用下面这些请求

执行GET请求

格式：

// 为给定 ID 的 user 创建请求
axios.get('/user')
  .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);
  });

我们在开发中某些数据在不同的服务器中，我们需要发送多个请求，这时我们可以使用axios.all这个方法进行多个并发请求

执行多个并发请求

axios.all([
    axios({
      url:"http://192.168.5.252:8081/getUser"
    }),
    axios({
      url: "'http://123.207.32.32:8000/home/multidata'",
      params: { // 传递参数
        type: 'sell',
        page: 5
      }
    })
]).then(res => {
  console.log(res)
})

注意： 如果我们通过post传参参数则需要把参数放到data中

axios({
     url:"http://192.168.5.252:8081/addUser",
     method: 'post',
     data: {
        name: 'yefeng',
        password: '123456'
    }
 }),

2. axios的实例和模块封装

axios的实例

​ 在项目中可能会出现发送多个数据， 而这些数据可能存在某些相同的配置，这种情况下需要使用axios的全局配置。但是，也有可能出现某些配置相同，而某些配置不相同，这时就需要使用axios的实例

​ 创建axios的实例时需要使用axios.create()函数，参数对对象类型，将配置相同的属性放入其中。当传递数据时调用实例对象，输入各自的属性即可

// 创建axios实例对象
const instance1 = axios.create({
  baseURL: '127.0.0.1:8000',
  timeout: 5000
})

// 调用axios实例
instance1({
  url: '/home/cart'
}).then(res => {
  console.log(res)
});

instance1({
  url: '/home/data',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
});

模块封装

为了实现能够降低代码耦合度，需要将axios框架进行封装，将axios相关代码放在其他文件中，而组件只需要引入这些文件就可以直接使用axios框架，方便使用与修改首先

在src根目录下创建network文件夹，在文件夹内创建request.js文件用于存放axios相关代码

方式一：使用函数

request.js

import axios from 'axios'

export function request(config, success, failture) {
  // 1.创建axios实例
  const instance1 = axios.create({
    baseURL: '127.0.0.1:8000',
    timeout: 5000
  })

  instance1(config).then(res => {
    success(res)
  }).catch(res => {
    failure(res)
  });
}

main.js

// 模块封装
import {request} from './network/request'

request({
  url: '/home/data'
}, (res => {
  console.log(res)
}), (res => {
  console.log(res)
}));

方式二：对方式一的参数进行修改

request.js

import axios from 'axios'

export function request(config) {
  // 1.创建axios实例
  const instance1 = axios.create({
    baseURL: '127.0.0.1:8000',
    timeout: 5000
  })

  instance1(config.baseConfig).then(res => {
    config.success(res)
  }).catch(res => {
    config.failure(res)
  });
}

main.js

// 模块封装
import {request} from './network/request'

request({
  baseConfig: '/home/data',
  success(res) {
    console.log(res);
  },
  failure(res) {
    console.log(res);
  }
});

方式三：使用promise实现

request.js

import axios from 'axios'

export function request(config) {
  return new Promise((resolve, reject) => {
    // 1.创建axios实例
    const instance1 = axios.create({
      baseURL: '127.0.0.1:8000',
      timeout: 5000
    })

    instance1(config).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}

main.js

// 模块封装
import {request} from './network/request'

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

注意：axios返回本事就是一个promise函数，所以不推荐这个方法

方式四：最终方案

request.js

import axios from 'axios'

export function request(config) {
  // 1.创建axios实例
  const instance = axios.create({
    baseURL: '127.0.0.1:8000',
    timeout: 5000
  })
  return instance1(config)
}

main.js

// 模块封装
import {request} from './network/request'

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

我们可以在创建一个js文件，名字随便命名。在js文件中导入之前封装好的request.js文件,这样我们在调用的使用就可以直接调用这个js文件中的函数发送请求，这样Vue文件中的代码就会清晰很多

import request from '@/utils/request'

export function getRoles() {
  return request({
    url: '/vue-element-admin/roles',
    method: 'get'
  })
}

export function addRole(data) {
  return request({
    url: '/vue-element-admin/role',
    method: 'post',
    data
  })
}

export function updateRole(id, data) {
  return request({
    url: `/vue-element-admin/role/${id}`,
    method: 'put',
    data
  })
}

export function deleteRole(id) {
  return request({
    url: `/vue-element-admin/role/${id}`,
    method: 'delete'
  })
}

3. axios 使用拦截器

    // 拦截器
    instance.interceptors.request.use(config => {
        console.log(config);
        // 1. 比如config中的一些信息不符合服务器需求
        // 2. 比如每次发送网络请求时， 都希望在界面显示一个请求的图标
        // 3. 某些网络请求（比如登录（token）），必须携带一些特殊信息
        return config.data;
    }, error => {
        console.log(error)
    })

    // 响应拦截
    instance.interceptors.response.use(res => {
        console.log(res)
        return res
    })
    return instance(config)
}