axios封装

481 阅读1分钟

axios封装

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;
复制代码

2.再需要创建一个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"
         })
 
     }
}
复制代码

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

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