首页 > 其他分享> 文章详细

Axios的正确食用方法

2021-12-18 15:05:28 阅读：145 来源： 互联网

标签：axios return 正确 get 访问 Axios data 食用方法 opts

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

1. 安装

全局执行代码

npm install axios;

2. 编写全局axios文件（附件里有代码）

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

写上全局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封装文件
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,return,正确,get,访问,Axios,data,食用方法,opts
来源： https://www.cnblogs.com/smileZAZ/p/15705003.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9