项目中如何分装axios

283 阅读1分钟

首先在vue框架中创建一个init.js文件

import axios from "axios"
import store from './store'
console.log(store)
let req = axios.create({
  
})


req.interceptors.request.use(
    //config代表是你请求的一些信息
    config=>{
      store.state.done=true
      console.log(store.state.done)
      return config
    },
    error=>{
      return Promise.error(error)
    }
  );
  //响应拦截
  req.interceptors.response.use(
    response=>{
      if(response.status==200){
        setTimeout(()=>{
          store.state.done=false
        },2000)
        return Promise.resolve(response)
      }else{
        return Promise.reject(response)
      }
    },
    error=>{
      if(error.response.status){
        return Promise.reject(error.response)
      }
    }
  )

export default req;

再需要创建一个api.js文件

import req from "./init" // console.log(req)

export default { //外部接口获取 getlist(){

   return req({
        type:"get",
        url:"http://mengxuegu.com:7300/mock/5ed8a7f631561b0233dde2de/api/api"
    })

},
//本地自定义接口获取
getlogin(){

    return req({
         type:"get",
         url:"/login.json"
     })

 }
}

就可以在哪个组件需要,哪里引入,调用

created(){
 text.getlist().then(res=>{
     console.log(res.data.data.data)
 })
  text.getlogin().then(res=>{
     console.log(res)
 })
} ,