axios封装 及 使用方法

axios封装 及 使用方法

axios安装

npm install axios --save

axios封装

/**
 * Created by superman on 17/2/16.
 * http配置
 */
import axios from 'axios'
import router from '../router'

// axios 配置
axios.defaults.timeout = 5000
axios.defaults.baseURL = ''// 这里面放域名

// http request 拦截器
// 拦截器是面对报错 或者 抛出错误之后 做出的一系列行动
axios.interceptors.request.use(
  config => {
    // config.headers.Authorization = `token ${store.state.token}`
    return config
  },
  err => {
    return Promise.reject(err)
  },
)

// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    console.log(error.response, '===================')
    if (error.response) {
      switch (error.response.status) {
        case 404:
          // 404 清除token信息并跳转到登录页面
          localStorage.removeItem('username');
          
          // 只有在当前路由不是登录页面才跳转
          router.currentRoute.path !== '/' &&
          router.replace({
            path: '/',
            // query: { redirect: router.currentRoute.path },
          })
      }
    }
    // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402

这里面添加了 拦截器 可以遇到路由报错后，做出一系列的行动。

axios封装调用

另一个文件内写api接口 后面只需要引用这个api文件 调用抛出的相对应的promise 就可以了。

import request from '../utils/http'

import qs from "qs";

export function getJsonData(params){
    return request({
        url: './data.json',
        method:'get',
        params
    })
}

输出页面 获取数据

<script>
import { getJsonData } from '../api/api'
import qs from 'qs'
import request from '../utils/request'

export default {
    data(){
        return{
            
        }
    },
    created(){
        getJsonData().then((res)=>{
            console.log(res)
        })
    }
}
</script>

没啥文采 就上代码就完事了- -