6.封装axios定义ajax请求函数模块与优化统一处理异常

安装 axios包：【版本：1.3.3】 npm install axios

初级版本 api/ajax.js文件内容

/*
    能发送异步ajax请求的函数模块
    封装axios库
    函数的返回值是promise对象： .then
 */


import axios from 'axios'


export default function ajax(url, data={}, method='GET') {
    if(method === 'GET') {
        // 发送get请求： url  参数配置对象
        return axios.get(url, { params: data},)
    }else{
        // 发送post请求
        return axios.post(url, data)
    }
}

api/index.js文件中封装了具体请求函数如下：

/*
    包含应用中所有接口请求函数的模块
    使用分别暴露
    箭头函数：有返回的作用，省略return
 */
import ajax from './ajax'


// 登陆
export function reqLogin(username, password){
    return ajax('/login', {username, password}, 'POST')
}
// 添加用户
export const reqAddUser = (user) => ajax('/admin/user/add', user, 'POST')

Webstorm 创建js文件时，显示是txt文件，如何修改：？

选中该文件，然后 File->File Properties->Associate with File Type —> JavaScript —> OK

 

优化后的代码如下： api/ajax.js文件内容如下：

/*
    能发送异步ajax请求的函数模块
    封装axios库
    函数的返回值是promise对象 .then
    优化：统一处理请求异常做法：
        在外层包一个自己创建的promise对象
        在ajax请求出错时，不reject(error), 而是显示错误提示
 */


import axios from 'axios'
import {message} from 'antd'
export default function ajax(url, data={}, method='GET') {
    // 执行器函数 executor
    // Promise 新建时，传入执行器函数 executor
    return new Promise((resolve, reject) => {
        let promise
        // 1.执行异步ajax请求
        if(method === 'GET') {
            // 发送get请求： url  参数配置对象
            promise = axios.get(url, { params: data},)
        }else{
            // 发送post请求
            promise = axios.post(url, data)
        }
        // 2.如果执行成功了，调用resolve
        promise.then(response => {
            resolve(response)
        }).catch(error => {
            // 3.如果失败了，不调用reject【调用的话会触发try catch, 而我们不想写try catch】，而是提前抛出异常信息
            message.error("请求出错了：" + error.message)
        })
    })
}


// 请求登陆接口
ajax('/login', {}, 'POST').then()
// 添加用户
ajax('/admin/user/add', {}, 'POST').then()




// 以上请求接口代码在index.js中封装好了