vue项目封装axios并访问接口

Posted xlfdqf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 = 45f8f587-7b46-462f-a8c4-1ca4dc64a336;
        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 default axios

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

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:在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);
        );
    

 

以上是关于vue项目封装axios并访问接口的主要内容,如果未能解决你的问题,请参考以下文章

vue代理失败 直接访问可以

vue封装接口

vue的接口封装和状态管理

vue axios接口封装Promise封装简单的axios方法封装vue接口方法封装vue postgetpatchput方法封装

vue中Axios的封装和API接口的管理

Vue项目中有封装过axios吗?怎么封装的?