vue project package axios and access interface

1. Create a new folder in the util src, New request.js file in the util:

Package axios:

Axios Import from  ' Axios ' 
Import the QS from  ' QS ' ;
 // Import from Store '@ / Store / The index.js'; 
Import the Message {} from  ' Element-UI ' ;   // Element library prompt message, can not 

/ / environment switching
 // IF (process.env.NODE_ENV == 'development') { // development
 //      axios.defaults.baseURL = '/ API';}
 // the else IF (process.env.NODE_ENV == ' Debug ') { // test
 //      axios.defaults.baseURL =' https://www.ceshi.com ';
//}
 // the else IF (process.env.NODE_ENV == 'Production') { // online
 //      axios.defaults.baseURL = ' https://www.production.com ';
 // } 

// request time 
= axios.defaults.timeout 15000 ; 

// POST request header 
axios.defaults.headers.post [ ' the Content-the Type ' ] = ' file application / X-WWW-form-urlencoded; charset = UTF-. 8 ' ; 

// request interceptor is 
axios.interceptors.request.use ( 
    config => {
         // each token before determining whether there is a transmission request, if present, in a unified header http requests is coupled token, not every request manually added
        const token = ' 45f8f587-7b46-462f-a8c4-1ca4dc64a336 ' ;
         IF (token) {   // determines whether there is a token, if present, are then each http header plus token 
            config.headers.Token = token; 
        } 
        return config; 
    }, 
    error => {
         return Promise.error (error); 
    }); 
// response blocker 
axios.interceptors.response.use ( 
    response => {
         IF (Response.Status === 200 is ) {
             return  Promise. resolve (response);
        } the 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 default axios

2: In the util file and then create api.js file:

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

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

3: Visit the interface in html page:

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);
        });
    }
}