新手小白如何封装使用axios和封装请求接口

下载axios

npm install axios

创建axios.js文件并且初步配置请求拦截器和响应拦截器

import axios from 'axios'

// 1、基本配置
const request = axios.create({
    //  公共的请求域名，可改为自己项目的域名
    baseURL: 'https://api.example.com',
    //  响应时间，单位毫秒，可更改 
    timeout:2000
})

// 2、配置请求拦截器
request.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

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

export default request;

封装请求接口

// 创建api.js文件并且引入已封装好的axios文件
import request from './axios.js';

// 发送get请求
export const getData = () => {
    return request.get('/data')
}

// 发送post请求
export const DataList = (data) => {
    return request.post('/data',data)
}

在项目中使用请求接口

<script>
//引入封装的文件
import { getData, DataList } from './api'；
export default {
  data() {
    return {
      form:{
        name:'',
        age:''
      }
    };
  },
  async mounted() {
    // 获取get请求数据
    const result = await getData();
    console.log('此为get请求成功后的数据',result )
    // 使用封装的api请求post数据
    const res = await DataList(form);
    console.log('此为get请求成功后的数据',res )
  },
 
};
</script>