vue---axios的封装

Posted 2022-12-27 fdxjava

//新建一个文件夹network---request.js
import axios from ‘axios‘
//config接口参数，函数1（成功后的回调将数据返回给引用者），函数2（将错误返回给引用者）
export function request(config, success, failure)
//创建实例--配置
const instance = axios.create(
    baseURL: ‘地址‘，
    timeout: 5000
)
//发送真正的网路请求--引用配置
instance(config)
    .then(res => 
        //将获取到的数据返回给引用者--通过success函数
        success(res)
    )
    .catch(err => 
        failure(err)
    )

引用、

//封装request模块
//引入
import request from "./network/request"

request(
    url: ‘api接口‘
, res=> 
    console.log(res);
, err =>
    console.log(err);
)

　建议　引用  promise异步操作

import axios from ‘axios‘

export function request(config)
return new Promise((resolve, reject) => 
    //创建实例--配置
const instance = axios.create(
    baseURL: ‘地址‘，
    timeout: 5000
)
//发送真正的网路请求--引用配置
instance(config)
    .then(res => 
        //将获取到的数据返回给引用者--通过resolve函数
        resolve(res)
    )
    .catch(err => 
        reject(err)
    )
)

其实这里的

instance(config)
    .then(res => 
        //将获取到的数据返回给引用者--通过resolve函数
        resolve(res)
    )
    .catch(err => 
        reject(err)
    )
)
可以简化直接写 return instance(config)   
因为

axios.create就直接调用的promise的接口
不用再包装了
当然

return new Promise((resolve, reject) => ----也应删除

调用

request(
    url: ‘‘,
).then(res => 

).catch(err => 
    
)