Vuejs（五）：axios

一：axios请求方式

支持多种请求方式:

• axios(config)
• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

1.1 安装使用

npm install axios --save

这里直接在main.js文件演示：

..................
import axios from 'axios'
....................
axios({
  url: 'http://httpbin.org/',
  method: 'get'				# 默认get请求
}).then(res => {
  console.log(res);
})

带参数的get请求：

axios({
  url: 'http://httpbin.org/get?name=andy&age=17',
  method: 'get'
}).then(res => {
  console.log(res.data.args);
})

或者：

axios({
  url: 'http://httpbin.org/get',
  method: 'get',
  params: {
    name: 'andy',
    age: 17
  }
}).then(res => {
  console.log(res.data.args);
}

1.2 发送并发请求

axios.all([
    axios({
      url: 'http://httpbin.org/get'
    }),
    axios({
      url: 'http://httpbin.org/get',
      params: {name: 'andy', age: 17}
    })
    # 上面两个请求全部完成后，执行到then()中
]).then(results => {		# 返回一个数组
  console.log(results[0]);
  console.log(results[1]);
})

axios提供了一个spread方法，可将results解构：

axios.all([
    axios({
      url: 'http://httpbin.org/get'
    }),
    axios({
      url: 'http://httpbin.org/get',
      params: {name: 'andy', age: 17}
    })
]).then(axios.spread((res1,res2) => {
  console.log(res1);
  console.log(res2);
}))

1.3 配置信息相关

# 全局公共配置
axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 5000
axios.all([
    axios({
      url: '/get'
    }),
    axios({
      url: '/get',
      params: {name: 'andy', age: 17}
    })
]).then(axios.spread((res1,res2) => {
  console.log(res1);
  console.log(res2);
}))

1.4 axios实例

开发过程可能会请求不同IP:PORT，（这里排除nginx转发），那么就不能像上面那样做全局配置。
此时可以创建多个axios实例，然后使用不同的实例去请求

const instance1 = axios.create({
  baseURL: 'https://httpbin.org',
  timeout: 5000
})
instance1({
  url: '/get'
}).then(res => {
  console.log(res);
})

1.5 模块封装

创建src/network/request.js文件

import axios from 'axios'
export function request(config) {
    const instance = axios.create({
      baseURL: 'https://httpbin.org',
      timeout: 5000
    })
    // instance(config)返回的就是Promise
    return instance(config)
}

使用方法：

import {request} from './network/request'
request({
  url: '/get'
}, res => {
  console.log(res);
}, err => {
  console.log(err);
})

1.6 axios拦截器

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

import axios from 'axios'

export function request(config) {
  const instance = axios.create({
    baseURL: 'https://httpbin.org',
    timeout: 5000
  })

  // 请求拦截
  instance.interceptors.request.use(config => {
    // 1：比如config中的一些信息不符合服务器的要求，可以使用拦截器，在这里做处理
    // 2：比如每次发送网络请求时，希望在界面显示一个请求的图标
    // 3：某些网络请求（如登录），必须携带一些特殊信息
    // console.log(config);
    // 拦截成功的请求，处理后必须要返回
    return config
  }, error => {
    // console.log(error);
  });
  // 响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, error => {
    console.log(error);
  });

  // instance(config)返回的就是Promise
  return instance(config)
}

1.7 生产环境的使用

1：封装axios
封装的文件为：src/network/request.js，内容就是1.6节的内容
2：假如现在需要在course.vue组件中请求数据
新建src/network/course.js文件，course.vue中所有的数据请求都放到course.js文件中

import {request} from './request'

export function getData() {
  return request({
    url: '/get'
  })
}

3：在course.vue组件中请求方法

<script>
  import {getData} from 'network/course'

  export default {
    name: "Course",
    data() {
      return {}
    },
    created() {
      getData().then(res => {
        console.log(res)
      })
    }
  }
</script>