axios封装及使用

最新推荐文章于 2024-09-29 10:05:19 发布

走_开

最新推荐文章于 2024-09-29 10:05:19 发布

阅读量667

点赞数 2

分类专栏： web前端 axios 文章标签： javascript axios

本文链接：https://blog.csdn.net/believet93/article/details/108274868

版权

本文介绍了如何进行axios的封装，创建了index.js和http.js两个文件，并在main.js中引入。详细展示了get请求（带参数和不带参数）以及post请求的使用方法，提供了基础URL配置示例。

摘要由CSDN通过智能技术生成

一、新建文件夹axios，在文件夹中新建文件index.js和http.js

(1) index.js

// 倒入所有接口
import apiList from './http'

const install = Vue => {
  if (install.installed) return
  install.installed = true

  Object.defineProperties(Vue.prototype, {
    // 注意哦，此处挂载在 Vue 原型的 $api 对象上
    $http: {
      get () {
        return apiList
      }
    }
  })
}

export default install

(2) http.js

import axios from 'axios'
import { router } from '@/router'
import store from '../store'

// 设置api访问基路径
axios.defaults.baseURL = 'http://' + store.state.domain

axios.defaults.headers.post['Content-Type'] = 'application/json'  // 设置数据传输方式
axios.defaults.timeout = 100000  // 设置请求超时为10秒

// request 拦截器
axios.interceptors.request.use(
  config => {
    let token = store.state.token
    // let tokenState = store.state.tokenState
    // 1. 请求开始的时候可以结合 vuex 开启全屏 loading 动画
    // console.log(token)
    // console.log('准备发送请求...')
    // console.log(tokenState)
    // 2. 带上token
    if (token) {
      config.headers.Authorization = 'Bearer ' + token
      // console.log(config.headers.Authorization)
    }
    // if(tokenState) {
    //   // 重定向到登录页面
    //   console.log("999999999999999999999999")
    //   console.log(tokenState)
    //   router.push('/login')
    // }
    // 3. 根据请求方法，序列化传来的参数，根据后端需求是否序列化
    if (config.method === 'post') {
      config.data = JSON.stringify(config.data)
    }
    // console.log(config)
    return config
  },
  error => {