Axios的正确食用方法

  • A+
所属分类:Web前端
摘要

  


这里分享出我个人封装的一个axios,我会尽量每行注释,希望对大家有所帮助。

1. 安装

全局执行代码

npm install axios;

Axios的正确食用方法

2. 编写全局axios文件(附件里有代码)

src目录中创建一个axios目录,里面创建一个index.js文件

Axios的正确食用方法

写上全局index.js代码

import axios from 'axios'//引入axios const methodType = 'get' | 'post' | 'delete' | 'put'//设置全局提交类型 const DataParamsMethod = ['post', 'delete', 'put']//设置数据提交的类型  export class Http { //定义全局http事件   header   httpOpts   constructor() {     this.header = {} //设置访问的header头部     this.httpOpts = { //设置默认的访问参数       method: 'get', //访问类型       noHandleError: false, //访问失败       noHandle401: false, //访问401       noHandle403: false, //访问403       noHandle500: false //访问500     }   }    //定义类库中的get事件   get(url, data = {}, opts={}) {     opts.method = 'get' //修改全局提交类型     return this.request(url, data, opts) // 调用方法,开始访问   }   //定义类库中的post事件   post(url, data = {}, opts={}) {     opts.method = 'post'//修改全局提交类型     return this.request(url, data, opts)// 调用方法,开始访问   }   //总访问方法   request(url, data = {}, opts={}) {     opts = { ...this.httpOpts, ...opts } // 导入全局类型等数据     const contentType = 'application/json' //定义返回头头部     return new Promise((resolve, reject) => { //定义promise事件,开始访问       const method = opts.method || 'get' //定义访问类型       void axios({         url, //访问地址         baseURL: process.env.baseURL || process.env.apiUrl || 'https://static.popodv.com', //设置访问前缀,可以设置总访问的前缀         data: data ? data : {},//post设置数据         params: opts.method === 'get' ? data : {},//get设置数据         timeout: 60 * 1000, // 请求超时         headers: {           ...this.header, //设置headers头部           'content-type': contentType//设置返回头头部         },         method //设置访问类型       })         .then((res) => { //当有回调时           if (res.status === 200) {             return resolve(res.data) //返回数据           } else if (res.status === 500) { //访问报错,参数问题             return resolve(res.data) //返回数据,方便代码操作           }         })         .catch(err => {//总访问报错           return reject(err)//调用错误回调         })     })   } }

3. 编写api文件

src目录中创建一个api目录,里面创建一个index.js文件

Axios的正确食用方法

写上各个接口的访问代码

// 引入axios封装文件 import { Http } from '@/axios/index.js' //定义全局axios事件 const axios = new Http()  // get方法案例 export function getTest () {   return axios.get('/data/attr/gfs.json') }  // post方法案例 export function postTest (name) {   return axios.post('https://static.popodv.com/data/attr/gfs.json',{     name:name   }) }

4. 页面引用

页面上引入

import {getTest} from '@/api/index.js'

调用代码

async mounted() {   const res = await getTest();   if(res.status == 200){     console.log(res.data)   } }

效果图:

Axios的正确食用方法

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 Axios的正确食用方法