axios模块封装

Posted 2020-11-27 懒惰ing

axios模块封装

• 创建一个network文件夹
  • 创建一个request.js文件
  • 创建一个main.js文件

request.js

import axios from ‘axios‘

export function request(config) {
    //1.创建axios的实例
    const instance = axios.create({
        timeout: 5000//超时设置
    })

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

    //2.2 响应拦截的作用
    axios.interceptors.response.use(res => {
        console.log(res)
    }, err => {
        console.log(err)
    })

    //3.发送真正的网络请求
    return instance(config)
}

main.js

import {request} from ‘./request‘

export function 函数名(){
    return request({
        url: ‘请求地址‘
    })
}

使用

函数名()
        .then(res => {
           console.log(res)
        })
        .catch(

        );

常见的配置选项

• 请求地址

  • url: ‘/user‘

• 请求类型,默认get

  • methods: ‘get‘

• 请求根路径

  • baseURL: ‘http://www.aaa.com/api‘

• 请求前的数据处理

  • transformRequest: [function(data) {}]

• 自定义的请求头

  • headers: {‘x-Requested-With‘: ‘XMLHttpRequest‘}

• URL查询对象(get请求)

  • params: {name: lazy}

• 查询对象序列化函数

  • paramsSerializer: function(params){}

• request body(post请求)

  • data: {name: lazy}

• 超时设置(s)

  • timeout: 1000

• 跨域是否带Token

  • withCredentials: false

• 自定义请求处理

  • adapter: function(resolve, reject, config){}

• 身份验证信息

  • auth: {uname: ‘‘, pwd: ‘12‘}

• 响应的数据格式

  • responseType: ‘json‘