axios

axios的安装

npm install axios --save

使用

axios({
  url: 'http://www.blogry.cn/test/index',
  methods: 'post'
}).then(result => {
  console.log(result);
})

all 方法

axios.all([
  axios({
    url: 'http://www.blogry.cn/test/index',
    methods: 'post'
  }),
  axios({
    url: 'http://www.blogry.cn/test/blog',
    params: {
      title : '我的编程经历'
    },
    methods: 'post'
  }),
]).then(result => {
  console.log(result[1].data[0].title);
})

全局配置

// 全局配置超时时间
axios.defaults.timeout = 5000

axios.all([
  axios({
    url: 'http://www.blogry.cn/test/index',
    methods: 'post'
  }),
  axios({
    url: 'http://www.blogry.cn/test/blog',
    params: {
      title : '我的编程经历'
    },
    methods: 'post'
  }),
]).then(result => {
  console.log(result[1].data[0].title);
})

常见的配置选项

请求地址
url: "/user',
请求类型
method: 'get',
请求根路径
baseURL: 'http://www.mt.com/api'，
请求前的数据处理
transformRequest:[function(data){}],
请求后的数据处理
transformResponse: [function(data){}].
自定义的请求头
headers:{'x-Requested-With: XMLHttpRequest'),
参数
params:{ id: 12 },

查询对象序列化函数
paramsSerializer: function(params){ }request body
data: { key: 'aa'},
超时设置
timeout: 1000,
跨域是否带Token
withCredentials: false,
自定义请求处理
adapter: function(resolve, reject, config)0.身份验证信息
auth: { uname: ", pwd: '12],
响应的数据格式json / blob /document /arraybuffer / text/ stream
responseType: 'json',

实例

• 当我们服务器不止一个 ip 地址不同时 , 我们可以通过创建实例的方式来进行不同的请求操作

• 通过 axios.create({}) 创建实例

  const instance1 = axios.create({
    baseURL: 'http://www.blogry.cn',
    timeout: 5000
  })
  
  const instance2 = axios.create({
    baseURL: 'http://www.hahha.cn',
    timeout: 5000
  })
  
  

• 使用实例

  axios.all([
    instance1({
      url: '/test/index'
    }),
    instance1({
      url: '/test/blog',
      params: {
        title: '我的编程经历'
      }
    }),
  ]).then(result => {
    console.log(result[1].data[0].title);
    console.log(result);
  })
  

封装 axios

• 我们最好将发送请求的操作封装起来 , 统一进行操作

• 封装 axios

  我们创建一个文件夹 network 在其中创建一个 reqeust 文件

  /* reqeust文件 */
  import axios from 'axios'
  
  export function request(config){ /* 传入一个 config */
  
    /* 返回一个Promise*/
    return new Promise((resolve, reject) => {
  
      //创建实例
      const instance1 = axios.create({
        baseURL: 'http://www.blogry.cn/',
        timeout: 5000
      })
  
      instance1(config) /* 传入一个 config */
        .then(result => {
          resolve(result)	/*回调 then */
        })
        .catch(error => {
          reject(error) /*回调 catch */
      });
  
    })
  
  }
  

  使用

  // 依赖request文件 , 因为不是default 导出 , 需要加 {}
  import {request} from './network/request'
  
  request({ /* config */
    url: '/test/blosg',
    params: {
      title: '我的编程经历'
    }
  }).then(result => { /*回调函数 then*/
    console.log(result)
  }).catch(error => { /*回调函数 catch*/
    console.log(error)
  })
  

• 我们可以直接返回 instance 因为 instance 本身返回的就是一个 Promise

  import axios from 'axios'
  
  export function request(config){
  
      //创建实例
      const instance1 = axios.create({
        baseURL: 'http://www.blogry.cn/',
        timeout: 5000
      })
  
      return instance1(config) /*这里直接返回*/
  
  }
  

  import {request} from './network/request'
  
  request({ /* 这里相当于 整个request({}) 就是一个Promise 可以直接回调 then 和 catch*/
    url: '/test/blog',
    params: {
      title: '我的编程经历'
    }
  }).then(result => {
    console.log(result)
  }).catch(error => {
    console.log(error)
  })