axios封装

axios封装

一、.axios官网：http://www.axios-js.com/

二、案例

1.执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2.执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3.axios API

可以通过向 axios 传递相关配置来创建请求

axios(config)

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// 获取远端图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

axios(url[, config])

// 发送 GET 请求（默认的方法）
axios('/user/12345');

请求方法的别名

为方便起见，为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
注意
在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

4.axios实例

 创建对应的axios的实例
 const request = axios.create({
   baseURL: 'http://123.207.32.32:8000',
   timeout: 5000
 })

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

三、axios封装

1.文件目录

2.js回调函数理解和简单使用

function test(a, b) {
  a('Hello World')//回调红色部分的函数并传参数'Hello World'到红色方法
  b('err message')//同理，回调绿色函数并返回参数到方法
}

//调用test方法，传递2个function的参数
test(function (res) {
  console.log(res);//返回值，值为'Hello World'
}, function (err) {
  console.log(err);//返回值,值为'err message'
})

3.回调函数方式，传递3个参数（一个config，一个成功函数，一个失败函数）

request.js文件

import axios from 'axios'

//接收一个地址参数，一个成功的函数参数，一个失败的函数参数
export function request(config, success, failure) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  // 发送真正的网络请求
  instance(config)
    .then(res => {
      // console.log(res);回调success函数并将res结果返回给调用该方法的成功的函数res
      success(res);
    })
    .catch(err => {
      // console.log(err);回调failure函数并将err结果返回给调用该方法的失败的函数err
      failure(err)
    })
}

main.js文件

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  render: h => h(App)
})

// 封装request模块
import {request} from "./network/request";
//调用axio传入一个地址，一个成功函数，一个失败函数
request({
  url: '/home/multidata'
}, res => {
  //res是返回的结果
  console.log(res);
}, err => {
　//err是返回结果
  console.log(err);
})

4.回调函数参数改进，封装成一个参数

import axios from 'axios'
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 发送真正的网络请求
  instance(config.baseConfig)
    .then(res => {
      // console.log(res);
      config.success(res);
    })
    .catch(err => {
      // console.log(err);
      config.failure(err)
    })
}

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

// 封装request模块
import {request} from "./network/request";
request({
  baseConfig: {

  },
  success: function (res) {

  },
  failure: function (err) {

  }
})

5.使用promise封装

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

    // 发送真正的网络请求，这里可以优化，看4.4优化方式
    instance(config)
      .then(res => {
        resolve(res)
      })
      .catch(err => {
        reject(err)
      })
  })
}

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})
// 封装request模块
import {request} from "./network/request";
request({
  url: '/home/multidata'
}, res => {
  console.log(res);
}, err => {
  console.log(err);
})

6.promise方式优化

main.js文件不变，request.js优化

import axios from 'axios'

export function request(config) {
  return new Promise((resolve, reject) => {
    // 1.创建axios的实例
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    //发送真正的网络请求
    //看create方法源码，他的返回值实际就是一个Promise，所一可以直接返回instance(config)
   return instance(config)
  })
}

7. request.js加上拦截器的封装

import axios from 'axios'

export function request(config) {
  return new Promise((resolve, reject) => {
    // 1.创建axios的实例
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    // 2.axios的拦截器
    // 2.1.请求拦截的作用
    instance.interceptors.request.use(config => {
      // console.log(config);
      // 1.比如config中的一些信息不符合服务器的要求

      // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标

      // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
      return config//这里必须return将结果返回。
    }, err => {
      // console.log(err);
    })

    // 2.2.响应拦截
    //请求到数据了，做一些数据判断，比如没有注册之类的，可以跳转到用户注册页面。也可以判断请求是的token 是否过期，给它重置刷新
    instance.interceptors.response.use(res => {
      // console.log(res);
      return res.data
    }, err => {
      console.log(err);
    })
    //3.发送真正的网络请求
    //看create方法源码，他的返回值实际就是一个Promise，所有可以直接返回instance(config)
   return instance(config)
  })
}