axios的简易二次封装

时间：2021-12-08 00:39:26

1、在src文件夹下创建utils文件夹，再创建request.js文件

  • request.js
//引入axios
import axios from 'axios'

//创建实例
const http = axios.create({
    //通用请求地址前缀
    baseURL:"http://127.0.0.1:xxxx/api/",
    //超时时间
    timeout:5000,
})
// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
export default http

2、在src文件夹下创建api文件夹，再创建index.js文件

axios.get(url[, config])

axios.post(url[, data[, config]])

import http from '../utils/request'

//请求数据
export const getData = () => {
    //返回一个promise对象
    return http.get('/register')
}

3、在页面中使用

<template>
	<div>
    
    </div>
</template>

<script>
//引入并将方法解构出来
import { getData } from '../api'
export default {
  name: '',
  data() {
    return {}
  },
  methods: {
      
  },
  mounted(){
      getData().then((data) => {
          console.log(data)
      })
  }
}
</script>

<style scoped lang="less">
</style>

相关文章