request接口封装Vue

由于一般使用axios,但是每个组件使用的话,每次都要调用axios还要写地址,如果想更改服务器的地址的话,就要一个组件一个组件的更改

所以这就是封装的好处

第一步：首先引入axios的依赖

创建utils/request.js

import axios from 'axios'
import Cookies from 'js-cookie'


// 请求头根据自己项目确定是否在此处：请求头添加token
function setAuthorizationHeader(config) {
    
    
  const _token = Cookies.get('yishi-token')
  const prefix = 'Token '
  // if has _token, set authorization token into http request headers
  if (_token && config && config.headers) {
    
    
    config.headers['Authorization'] = prefix + _token
  }
  return config
}

// create an axios instance
const service = axios.create({
    
    
  // baseURL: 'http://chenyp.top:8008', // url = base url + request url
  baseURL: 'http://192.168.1.208:9051', // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000, // request timeout
  withCredentials: true,
})


// request interceptor
service.interceptors.request.use(
  config => {
    
    
    setAuthorizationHeader(config)
    console.log('config', config)
    return config
  }, error => {
    
    
    console.log('request中的error', error)

  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    
    
    return response.data;
  },
  error => {
    
    
    console.log('error', error)
  }
)

export default service

第二步、对接口进行二次封装、

src/axios/api/system.js

import request from '../../utils/request'


export function login(data) {
    
    
  return request({
    
    
    url: '/api/user/login',
    method: 'post',
    data
  })
}


export function getVulnLib(data) {
    
    
  return request({
    
    
    url: '/api/task_lib/list',
    method: 'post',
    data
  })
}

第三步、页面使用

<script>
import {
    
     login } from "@/axios/api/system";
export default {
    
    
  data() {
    
    
    return {
    
    
    };
  },
  methods: {
    
    
    loginValidate() {
    
    
          login().then(res =>{
    
    
        })
    },
  },
};
</script>

超级简单的配置，完成！！