15、vue項目封裝axios並訪問接口

1.在src下新建util文件夾，在util下新建request.js文件：

封裝axios：

import axios from 'axios'
import QS from 'qs';
// import store from '@/store/index.js';
import { Message } from 'element-ui';  //element庫的消息提示，可以不用

// 環境的切換
// if (process.env.NODE_ENV == 'development') { //開發
//     axios.defaults.baseURL = '/api';}
// else if (process.env.NODE_ENV == 'debug') { //測試
//     axios.defaults.baseURL = 'https://www.ceshi.com';
// }
// else if (process.env.NODE_ENV == 'production') { //線上
//     axios.defaults.baseURL = 'https://www.production.com';
// }

// 請求超時時間
axios.defaults.timeout = 15000;

// post請求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 請求攔截器
axios.interceptors.request.use(
    config => {
        // 每次發送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動添加了
        const token = store.state.token;
        if (token) {  // 判斷是否存在token，如果存在的話，則每個http header都加上token
            config.headers.Token = token;
        }
        return config;
    },
    error => {
        return Promise.error(error);
    });
// 響應攔截器
axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服務器狀態碼不是200的情況
    error => {
        if (error.response.status) {
            console.log(error)
        }
        return Promise.reject(error.response);
    }
);

export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url,
            {
                params: params
            })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                if (!err.response) {
                    Message({
                        showClose: true,
                        message: 'get請求錯誤',
                        type: 'error'
                    });
                } else {
                    reject(err.data);
                    console.log(err.response, '異常2');
                }
            })
    });
}

export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                if (!err.response) {
                    Message({
                        showClose: true,
                        message: 'post請求錯誤',
                        type: 'error'
                    });
                } else {
                    reject(err.data);
                    console.log(err.response, '異常2');
                }
            })
    });
}

 
          
            export function deletes(url, params) { 
           
          
              return new Promise((resolve, reject) => { 
           
          
                   axios.delete(url, { 
           
          
                      data: params 
           
          
                      }).then(res => { 
           
          
                           resolve(res.data) 
           
          
                         }).catch(err => { 
           
          
                             reject(err.data) 
           
          
                        }) 
           
          
                      }) 
           
          
                    } 
           
          
 
          
            export function put(url, params) { 
           
          
                   return new Promise((resolve, reject) => { 
           
          
                    axios.put(url, params).then(res => { 
           
          
                     resolve(res.data) 
           
          
                      }).catch(err => { 
           
          
                  reject(err.data) 
           
          
                  }) 
           
          
                 }) 
           
          
               } 
           
         

export default axios

2：在util文件下再新建api.js文件：

import { get, post } from './request'
export function getTest(params) {
    return get(`/api/tbk/dg_optimus_material`, { id:params });
}

export function getNvZhuang(params) {
    return post(`/api/tbk/dg_material_optional `, params);
}

3:在html頁面訪問接口：

import { getTest, getNvZhuang } from "@/util/api.js"; // 導入api接口

  mounted: function() {
    this.queryList();
  },
  methods: {
    //精選
    queryList() {
      let params = { pageNo: 1, pageSize: 20 };
      getTest(params)
        .then(res => {
          this.jingxuanlist =
            res.tbk_dg_optimus_material_response.result_list.map_data;
          console.log(this.jingxuanlist);
        })
        .catch(error => {
          console.log(error);
        });
    }
}