axios调用接口

封装axios调用后端接口
项目结构是这样的

1. 首先是axios.js的代码

   import axios from 'axios';
   let options = {
       baseURL: '/'
   };
   if (process.server) {
       options.baseURL = `http://后端接口的路径`;
   }
   
   export default axios.create(options);
   

2. http.js代码

   import qs from 'qs';
   import axios from '@/utils/axios';
   import Cookies from 'js-cookie';
   import {Toast} from 'vant';
   import Vue from 'vue'
   
   Vue.use(Toast)
   export const prefix = '/api/web/';
   export const HTTP_VERBS = {
     post: 'post',
     get: 'get',
     put: 'put',
     delete: 'delete'
   };
   
   
   export function getAPIHeaders() {
     const headers = ({
       'X-Requested-With': 'XMLHttpRequest',
       'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
       'Accept': 'application/json'
     });
     const auth = Cookies.get("token");
     if (auth) {
       headers['Authorization'] = auth;
     }
     return headers;
   }
   
   
   function callAxios(url, type, data, options = {}) {
     let rv;
     let headers = getAPIHeaders();
   
     if (options.headers) {
       headers = Object.assign({}, headers, options.headers);
     }
   
     if (type === HTTP_VERBS.post) {
       rv = axios.post(prefix + url, data, {headers});
     }
     else if (type === HTTP_VERBS.put) {
       rv = axios.put(prefix + url, data, {headers});
     }
     else if (type === HTTP_VERBS.delete) {
       rv = axios.delete(prefix + url, {headers});
     }
     else if (type === HTTP_VERBS.get) {
       if (data && data.length > 0) {
         if (url.indexOf('?') > 0) {
           rv = axios.get(prefix + url + '&' + data, {headers});
         } else {
           rv = axios.get(prefix + url + '?' + data, {headers});
         }
       } else {
         rv = axios.get(prefix + url, {headers});
       }
     }
     return rv;
   }
   
   export function callAPI(url, type, params, options = {}) {
     let data = params;
     if (!(typeof params === 'string' || params instanceof String)) {
       data = qs.stringify(params);
     }
     let responseCode = 200;
     return callAxios(url, type, data, options)
       .then((response) => {
         if (response.status !== undefined) {
           responseCode = response.status;
         }
         if (responseCode == 200 && response.data) {
           if (response.data.code === 2) {
               responseCode = response.data.code
               Toast(response.data.msg)
             }
           if (response.data.data.code !== undefined) {
             responseCode = response.data.code;
           }
         }
   
     if (responseCode !== 200 && response.data) {
         let message;
         if (response.data.msg && response.data.msg.length > 0) {
             message = response.data.msg;
         }
   
         return Promise.reject(Object.assign(
             response.data,
             { code: responseCode, message }
         ));
     }
     return Promise.resolve(Object.assign(
       (response.data) || {},
       {code: responseCode,}
     ));
   }).catch((error) => {
     if (error && error.response) {
       return Promise.reject(Object.assign(
         error.response.data,
         {
           code: error.response.status
         }
       ));
     } else if (error && error.code) {
       return Promise.reject(error);
     } else {
       return Promise.reject(new Error(error && error.message));
     }
   });}
   

3. 调用封装接口

   import { callAPI,HTTP_VERBS } from '@/utils/http';
   const postService = {
     post(data){    //data是传递的参数可以是多个
       return callAPI('post/index',HTTP_VERBS.get,{ ...data })
     },
     postDetail(data){ //这个data表示参数是id这一个参数
   	return callAPI('post/details',HTTP_VERBS.get,{ id:data })
     },
   };
   export default postService;
   

4. 在组件中引入该数据（数据该渲染在何处）

   import postService from '@/service/post'
   
   postService.post().then(e=>{
   this.posts = e.data
   }).catch(err=>{
   	console.log(err)
   })
   
   postService.postDetail(id).then(e => {
     this.posts = e.data
    }).catch(err => {
      console.log(err)
    });
   

好了，OK