安装 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中封装好了
标签:axios,封装,请求,url,ajax,promise,函数 From: https://www.cnblogs.com/guo-s/p/17174697.html