axios的简单封装

axios的简单封装

下载

npm install axios -S
复制代码

全局引入

在main.js进行全局注册

import axios from 'axios'
Vue.prototype.$axios = axios
复制代码

创建axios文件夹

在src创建api文件夹 在创建axios文件夹
在axios文件夹里面新建另一个server.js文件和request.js文件
复制代码

1.在server.js文件中 创建axios实例 并请求拦截

import axios from 'axios'
//创建axios实例
const service = axios.create({})
    // t添加拦截器
service.interceptors.request.use(config => {
        console.log('正在请求')
        return config
    })
    // 添加响应拦截
service.interceptors.response.use(response => {
    console.log('请求成功')
    return response.data
}, error => {
    console.log('TLC:error', error)
    return Promise.reject(error)
})
export default service;
复制代码

2.在request.js中进行封装获取数据

import axios from "./Server"
export class firstApi {
    static getFisrtList() {
        return axios.get(`http://192.168.0.103:8081/index`)
		.then(res => res)
    }
}
复制代码