Axios的正确食用方法
时间:2021-12-19 作者:smileZAZ
这里分享出我个人封装的一个axios,我会尽量每行注释,希望对大家有所帮助。
1. 安装
全局执行代码
npm install axios;
2. 编写全局axios文件(附件里有代码)
在src目录中创建一个axios目录,里面创建一个域名文件
写上全局域名代码
import axios from \'axios\'//引入axios const methodType = \'get\' | \'post\' | \'delete\' | \'put\'//设置全局提交类型 const DataParamsMethod = [\'post\', \'delete\', \'put\']//设置数据提交的类型 export class Http { //定义全局http事件 header httpOpts constructor() { 域名er = {} //设置访问的header头部 域名Opts = { //设置默认的访问参数 method: \'get\', //访问类型 noHandleError: false, //访问失败 noHandle401: false, //访问401 noHandle403: false, //访问403 noHandle500: false //访问500 } } //定义类库中的get事件 get(url, data = {}, opts={}) { 域名od = \'get\' //修改全局提交类型 return 域名est(url, data, opts) // 调用方法,开始访问 } //定义类库中的post事件 post(url, data = {}, opts={}) { 域名od = \'post\'//修改全局提交类型 return 域名est(url, data, opts)// 调用方法,开始访问 } //总访问方法 request(url, data = {}, opts={}) { opts = { ...域名Opts, ...opts } // 导入全局类型等数据 const contentType = \'application/json\' //定义返回头头部 return new Promise((resolve, reject) => { //定义promise事件,开始访问 const method = 域名od || \'get\' //定义访问类型 void axios({ url, //访问地址 baseURL: 域名URL || 域名rl || \'https://域名\', //设置访问前缀,可以设置总访问的前缀 data: data ? data : {},//post设置数据 params: 域名od === \'get\' ? data : {},//get设置数据 timeout: 60 * 1000, // 请求超时 headers: { ...域名er, //设置headers头部 \'content-type\': contentType//设置返回头头部 }, method //设置访问类型 }) .then((res) => { //当有回调时 if (域名us === 200) { return resolve(域名) //返回数据 } else if (域名us === 500) { //访问报错,参数问题 return resolve(域名) //返回数据,方便代码操作 } }) .catch(err => {//总访问报错 return reject(err)//调用错误回调 }) }) } }
3. 编写api文件
在src目录中创建一个api目录,里面创建一个域名文件
写上各个接口的访问代码
// 引入axios封装文件 import { Http } from \'@/axios/域名\' //定义全局axios事件 const axios = new Http() // get方法案例 export function getTest () { return 域名(\'/data/attr/域名\') } // post方法案例 export function postTest (name) { return 域名(\'https://域名/data/attr/域名\',{ name:name }) }
4. 页面引用
页面上引入
import {getTest} from \'@/api/域名\'
调用代码
async mounted() { const res = await getTest(); if(域名us == 200){ 域名(域名) } }
效果图:
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。