关于axios

api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护.

通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢?那就只有找到那个页面,进去修改.整个过程很繁琐不易于项目的维护和迭代.

安装axios

npm install --save axios

Src下新建一个文件夹api

api 下新建一个文件requests.js

以下是requests.js中所有代码

import axios from 'axios'

const requests =axios.create({

baseURL:'/api',

timeout:5000,

})

requests.interceptors.request.use((config)=>{return config

}

requests.interceptors.response.use((res)=>{

return res.data},(error)=>{

return promise.reject(new Error ('fail')})

export default axios

以请求到的是home 获取数据及展示

api 文件夹下新建index.js 文件

import requests from './requests.js'

export const reqCategoryList=()=> requests({url:'/product/getBaseCategoryList',method:'get'})

在Main.js里面引入

import {reqCategoryList}from '@/api'

reqCategoryList()

如果有报错，出现跨域问题，需要配置proxy

去webpack里面找

在文件vue.config.js里面配置

module.exports={

lintOnSave:false,

devServer:{

proxy:{

'/api':{

target:'http:/www.baidu.com'

}}}

}