VUE-CLI学习第八天

axios学习

安装axios

npm install axios --save

axios基本使用

• 基本格式

  axios({
      url: 'http://123.207.32.32:8000/home/multidata',
      method: 'get'
  }).then(res => {
      console.log(res);
  })
  

• 使用axios自带的方法替换method等参数

  axios.get('http://123.207.32.32:8000/home/multidata').then(res => {
      console.log(res);
  })
  axios.post('http://123.207.32.32:8000/home/multidata').then(res => {
      console.log(res);
  })
  

• axios的url传参方式

1. 拼接在url后面

   axios({
       url: "http://123.207.32.32:8000/home/multidata?type=test&page=1",
       method: 'get'
   }).then(res => {
       console.log(res);
   })
   

2. 使用params参数

   axios({
       url: 'http://123.207.32.32:8000/home/multidata',
       params: {
           type: 'test',
           page: 1
       },
       method: 'get'
   }).then(res => {
       console.log(res);
   })
   

axios的all方法

• 基本用法（返回的result是一个数组）

  //格式
  //axios.all([axios(), axios()]).then()
  axios.all([axios({
      url: 'http://123.207.32.32:8000/home/multidata'
  }), axios({
      url: 'http://123.207.32.32:8000/home/data',
      params: {
          type: 'sell',
          page: 4
      }
  })]).then(result => {
      console.log(result);
  })
  

• 使用axios.spread将数组拆分

  axios.all([axios({
      url: 'http://123.207.32.32:8000/home/multidata'
  }), axios({
      url: 'http://123.207.32.32:8000/home/data',
      params: {
          type: 'sell',
          page: 4
      }
  })]).then(axios.spread( (res1, res2) => {
      console.log(res1);
      console.log(res2);
  }))
  

axios全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000'
                        //毫秒
axios.defaults.timeout = 5000 

常用配置选项

• 请求地址
  • url: ‘/user’
• 请求类型
  • method: ‘get’
• 请求根路径
  • baseURL: ‘http://www.mt.com’
• 请求前数据处理
  • transformRequest: [function(data){}]
• 请求后数据处理
  • transformResponse: [function(data){}]
• 自定义的请求头
  • headers: {‘x-Requested-With’:‘XMLHttpRequest’}
• URL查询对象
  • params: { id: 0 }
• 查询对象序列化函数
  • paramsSerializer: function(params){}
• request body
  • data: { key: ‘xx’ }
• 超时设置(单位为毫秒)
  • timeout: 1000
• 跨域是否带Token
  • withCredentials: false
• 自定义请求处理
  • adapter: function(resolve, reject, config){}
• 身份验证信息
  • auth: {uname: ‘’, pwd: ‘’}
• 相应式数据格式（json/blob/document/arraybuffer/text/stream）
  • responseType: ‘json’

创建axios实例

const axiosTest = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})
axiosTest({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
})

axios的封装

方法1（使用success、failure回调出数据）

src/network/request.js（创建封装文件）

import axios from 'axios'

export function request(config ,success, failure) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    });
    instance(config)
        .then(res => {
            success(res)
        }).catch(err => {
            failure(err)
    })

}

main.js

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

• 其中设置success和failure来回调then事件和catch事件

方法2（与方法1同一概念，只是将success、failure的对象名暴露了出来）

src/network/request.js

import axios from 'axios'

export function request(config) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    });
    instance(config.baseConfig)
        .then(res => {
            config.success(res)
        }).catch(err => {
            config.failure(err)
        })
}

main.js

import {request} from './network/request'
request({
  baseConfig: {
    url: '/home/multidata'
  },
  success: (res) => {
    console.log(res);
  },
  failurel: (err) => {
    console.log(err);
  }
})

方法3（结合Promise）

src/network/request.js

import axios from 'axios'

export function request(config) {
    return new Promise((resolve, reject) => {
        const instance = axios.create({
            baseURL: 'http://123.207.32.32:8000',
            timeout: 5000
        });
        instance(config)
            .then(res => {
                resolve(res)
            }).catch(err => {
                reject(err)
            })
    })
}

main.js

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

方法4（与方法3同一概念，instance(config)本身就是一个Promise对象）

src/network/request.js

import axios from 'axios'

export function request(config) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    });
    return instance(config)
}

main.js

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

axios拦截器

import axios from 'axios'

export function request(config) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    });
    //请求拦截
    //config对应的是instance(config)的config，会在发送请求前判断config
    instance.interceptors.request.use(config => {
        console.log('request'+config);
        // 使用场景
        // 1.config中一些信息不符合服务器要求
        // 2. 每次发送网络请求时，出现请求图标等
        // 3. 某些网络请求（登陆（token））必须携带特殊信息
        return config;
    }, err => {
        console.log(err);
        return err;
    })
    //相应拦截
    //res对应的是instance(config).then(res => {})中的res，会在获取response后判断返回值
    //err对应的是instance(config).catch(err => {})中的err
    instance.interceptors.response.use(res => {
        console.log('response'+res);
        return res.data; //可直接返回服务器传来的data而非全部数据
    }, err => {
        console.log(err);
        return err;
    })
    return instance(config)
}