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

原文地址:https://www.cnblogs.com/xlfdqf/p/11128089.html

时间: 2024-10-09 21:56:35

vue项目封装axios并访问接口的相关文章

记vue中封装axios

文件结构: mocks:中是本地json数据 adapter.js: 调用本地数据方法 resources.js 统一接口管理 export default { fetchDict: { url: '/v1/system/fetchDcType', method: 'post' } } 重点是以下俩个文件 index.js 拦截器以及请求头设置,并添加实例属性 import Vue from 'vue'; import axios from 'axios'; import { Toast } f

Vue中封装axios

参考: https://www.jianshu.com/p/7a9fbcbb1114 https://www.cnblogs.com/dreamcc/p/10752604.html 一.安装axios npm i axios -S 二.创建src/utils/axios.js.src/api/api.js axios.js用于封装axios,api.js用于管理接口 三.axios.js // axios.js import axios from "axios"; // 部分数据需要存

vue项目中使用mockjs模拟接口返回数据

Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多,不过大多数看的比较模糊.其实使用起来非常简单,这里介绍在Vue工程中使用Mockjs,并且实现开发和生产配置化. 一.安装 cnpm install --save-dev mockjs 二.引入 为了只在开发环境使用mock,而打包到生产环境时自动不使用mock,我们可以在env中做一个配置 //

vue项目配置 axios携带token请求头

在main.js中 import axios from 'axios' axios.defaults.baseURL = '' axios.interceptors.request.use(config => { //配置axios请求头,axios每次发起请求携带token,在Network中的headers看的到 // console.log(config) config.headers.Authorization = window.sessionStorage.getItem('token

vue 项目中当访问路由不存在的时候默认访问404页面

前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在最后添加一个path: * ,优先级从上到下查找路由,都没有的时候全部指向 404页面 ,代码如下: const baseRoute = [ { path: '/login', name: 'login', component: Login }, {path: '/', redirect: '/in

vue项目部署上线

前言 今天把自己写的demo登录写完了,就想着试着走一下部署上线的流程.参考了很多的文档,终于成功进行了部署.在这里将服务器的搭建和vue项目的 部署上线进行整理(都是基础的知识,希望对大家有帮助.对我帮助是很大的) 2.流程 1.服务器搭建 这里我用的是腾讯云的服务器.买了一个域名.没有备案的域名也可以使用.买完服务器进行域名解析. 点击添加解析,按照下面这样填写就行 马赛克是你的外网ip 可以根据你需要的进行修改,我这只是最基本的绑定.其他请自行百度. 3.添加ssh密钥 第一步添加密钥,会

vue项目axios请求接口,后端代理请求接口404,问题出现在哪?

在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中实现后,重启项目,结果接口404了.代码如下: 仔细检查后,代码没问题:于是在apiRouts中console.log()打印信息,运行没有打印信息,意味着根本没有运行这部分代码.于是想到会不会是webpack版本更新,配置发生了改变导致的.所以仔细看了配置后,发现webpack.dev.conf.

vue项目使用async await 封装 axios

es8的async await让异步变成了同步的写法,在vue中,可以通过封装axios,使得所有的请求都可以使用同步的写法. 新建一个api.js文件,全局创建api实例 import axios from 'axios' const qs = require('qs') const api = { async get (url, data) { try { let res = await axios.get(url, {params: data}) res = res.data return

vue项目常用之二:封装 axios 请求模块

/** * 封装 axios 请求模块 */ import axios from 'axios' import jsonBig from 'json-bigint' import store from '@/store' import router from '@/router' import { Notify } from 'vant' // axios.create 方法:复制一个 axios const request = axios.create({ baseURL: 'http://t