axios封装

默认配置

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

封装axios

src/network/request.js

import axios from 'axios'

1. 第一种(没有成功)

export function request(config, success, failure){
    // 1.创建axios实例
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    });
    // 2.发送真正的网络请求
    instance(config).then(res => {
        success(res)
    }).catch(err => {
        failure(err)
    })
}
request({
        config:'/home/multidata',
        success:(res) => {
            console.log(res)
        },
        failure:(err) => {
            console.log(err)
        }
    })

2. 第二种(把参数抽离成一个对象)

export function request(config){
    // 1.创建axios实例
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    });
    // 2.发送真正的网络请求
    instance(config.baseConfig)
    .then(res => {
        config.success(res)
    }).catch(err => {
        config.failure(err)
    })
}
request({
        baseConfig:'/home/multidata',
        success:(res) => {
            console.log(res)
        },
        failure:(err) => {
            console.log(err)
        }
    })

3. 第三种(Promise)

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.发送真正的网络请求
        instance(config)
            .then(res => {
                resolve(res)
            }).catch(err => {
                reject(err)
            })
    })
}
request({
        url:'/home/multidata'
    }).then( res => {
        console.log(res)
    }).catch( err => {
        console.log(err)
    })

4. 第四种(返回的值就为:Promise对象)(封装完成)

export function request(config){
    // 1.创建axios实例
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    });
    // 3.请求拦截
    instance.interceptors.request.use(config => {
    	//必要步骤
        return config
    },err => {
        console.log(err)
    })
    // 4.响应拦截
    instance.interceptors.response.use(res => {
        return res.data
    },err => {
        console.log(err)
    })
    // 2.发送真正的网络请求
    return instance(config)
}
//跟第三种一样的使用方法

封装使用

import { request } from 'request.js'

请求数据拦截器和响应数据拦截器

1. 请求数据拦截器

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

2. 响应拦截器

instance.interceptors.response.use(res => {
		//返回精简数据
        return res.data
    },err => {
        console.log(err)
    })

小程序请求封装

server->request.js文件

export default function request(options){
  return new Promise((resolve,reject) => {
    wx.request({
      url: options.url,
      method: options.method || 'get',
      data: options.data || {},
      success: resolve,
      fail: reject
    })
  })
}

使用app.js中

import request from './service/request.js'
 request({
 	url:'http://106.54.54.237:8000/api/hy/home/multidata'
 }).then(res => {
    console.log(res)
 }).catch(err => console.log(err))