Vue简单封装axios网络请求的方法

目录
  • Vue简单封装axios网络请求
  • 一、utils下的httpUtils.js:
  • 二、/api下的path.js:
  • 三、/api下的index.js:
  • 四、组件中引入并请求:

Vue简单封装axios网络请求

一、utils下的httpUtils.js:

import axios from 'axios';
import querystring from 'querystring';

const errorHandler = (status, info) => {
    switch(status){
        case 400:
            console.log("400 - 语义错误");
            break;
        case 401:
            console.log("401 - 服务器认证失败");
            break;
        case 403:
            console.log("403 - 服务器拒绝访问");
            break;
        case 404:
            console.log("404 - 地址错误");
            break;
        case 500:
            console.log("500 - 服务器遇到意外");
            break;
        case 502:
            console.log("502 - 服务器无响应");
            break;
        default:
            console.log(info);
            break;
    }
}

// 创建axios实例
const instance = axios.create({
    // 放置网络请求的公共参数
    timeout:5000, // 5s后超时
})

// 拦截器最常用
// 1、发送请求之前
instance.interceptors.request.use(
    config =>{
        if (config.method === 'post'){
            config.data = querystring.stringify(config.data)
        }

        // config中存在网络请求的所有信息
        return config;
    },
    error =>{
        return Promise.reject(error)
    }
)
// 2、接收响应后
instance.interceptors.response.use(
    response => {
        // 三目运算根据状态码来判断接收数据还是拒绝数据
        return response.status === 200 ? Promise.resolve(response):Promise.reject(response)
    },
    error=>{
        const { response } = error;
        // 自定义方法来输出异常信息
        errorHandler(response.status,response.info)
    }
)

// 导出
export default instance;

二、/api下的path.js:

const base = {
    // 公共路径
    baseUrl : "http://iwenwiki.com",
    chengpin : "/api/blueberrypai/getChengpinDetails.php",
    login : "/api/blueberrypai/login.php"
}

export default base;

三、/api下的index.js:

import axios from "../utils/httpUtils";
import path from "./path"

const api = {
    // 成品地址
    getChengpin(){
        return axios.get(path.baseUrl+path.chengpin)
    }
}

export default api;

四、组件中引入并请求:

<template>
  <div>
    <p>{{ msg }}</p>
  </div>

</template>

<script>
// import axios from 'axios';
// import QueryString from 'qs';
import api from "../api/index"

export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:"111",
    }
  },
  mounted(){
        //Fetch API 基本用法
    // fetch('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(function(data){
    //   // text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
    //   return data.json();
    // }).then(function(data){
    //   console.log(data.chengpinDetails[0].title);
    // })
    // get
    // axios({
    //   method:"get",
    //   url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php",
    // }).then(res=>{
    //   this.msg=res.data.chengpinDetails[0].title
    // })
    // post
    // axios({
    //   method:"post",
    //   url:"http://iwenwiki.com/api/blueberrypai/login.php",
    //   data: QueryString.stringify({
    //     user_id: "iwen@qq.com",
    //     password: "iwen123",
    //     verification_code: "crfvw"
    //   })
    // }).then(res=>{
    //   this.msg=res.data
    // })
      // 第二种get方法
    // axios.get('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(res=>{
    //   this.msg=res.data.chengpinDetails[0].title
    // })
      // 第二种post方法
    // this.$axios.post('http://iwenwiki.com/api/blueberrypai/login.php',QueryString.stringify({
    //   user_id: "iwen@qq.com",
    //   password: "iwen123",
    //   verification_code: "crfvw"
    // })).then(res=>{
    //   this.msg=res.data.success
    // })

    api.getChengpin().then(res=>{
      console.log(res.data)
    })
  }
}
</script>

<style scoped>

</style>

查看效果:

请求成功

到此这篇关于Vue简单封装axios网络请求的文章就介绍到这了,更多相关Vue封装axios网络请求内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue Router4路由导航守卫实例全面解析

    目录 前言 一.什么是导航守卫 二.全局前置守卫 可选的第三个参数 next 三.全局解析守卫 四.全局后置钩子 五.路由独享的守卫 六.组件内的守卫 可用的配置 API 使用组合 API 七.完整的导航解析流程 前言 在写Vue项目的时候,少不了使用路由vue-router,而路由守卫是vue-router中一个非常重要的概念,也是非常重要的技巧.它能够很好的帮助开发者“监视”每一个跳转的路由. 一.什么是导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫

  • vue3封装echarts组件最佳形式详解

    目录 思路 目录结构 组件代码 v-charts.vue useCharts.ts type.d.ts options/bar.ts 项目中使用 index.vue /hooks/useStatisDeviceByUserObject.ts 思路 项目中经常用到echarts,不做封装直接拿来使用也行,但不可避免要写很多重复的配置代码,封装稍不注意又会过度封装,丢失了扩展性和可读性.始终没有找到一个好的实践,偶然看到一篇文章,给了灵感.找到了一个目前认为用起来很舒服的封装. 结合项目需求,针对不

  • petite vue的使用示例详解

    目录 题引: 特征及使用: 1. CDN引入: 2.module引入 3. 组件化 4. 模板组件 结尾: 题引: 这几天在公司没事做,于是上网看看有关vue的文章,忽然看到尤大大的一个文章:只有5kb大小的mini vue,好家伙,又整活了,这不得冲一冲嘛. 特征及使用: petite-vue体积更小,约5bk: 对渐进的增强更加的明显,特别是运用在服务端渲染的页面上更是便捷.系统看了一下,语法跟vue的语法绝大部分是一样了,除了增加了一些新的语法糖: 基于reactive进行响应式 peti

  • Vue技巧Element Table二次封装实战示例

    目录 前言 思考 实践 filterPane.vue 明确目标 传入数据结构整理 timeSelect elinput elselect 开始封装 tablePane.vue 明确目标 传入数据结构整理 tool cols pageData operation tablePane.vue配置项Cols详解 开始封装 实战 结尾 前言 由于重构后台管理项目中有好多表格页面, 举个栗子 这表格看着还挺好看,写起来叫人直呼XX,多动脑子少掉发,少走弯路多省鞋. 写了一个后感觉太麻烦了,于是我奋笔疾书,

  • 手写可拖动穿梭框组件CustormTransfer vue实现示例

    目录 本文内容 最终效果图 组件html布局 穿梭框左侧内容 穿梭框右侧内容 穿梭框中间向左.向右按钮 把排序好的穿梭数据传给父组件 整体代码 小结 本文内容 需求是实现类似 el-transfer的组件,右侧框内容可以拖动排序: 手写div样式 + vuedraggable组件实现. 最终效果图 组件html布局 新建一个组件文件 CustormTransfer.vue,穿梭框 html 分为左中右三部分,使用flex布局使其横向布局,此时代码如下 <template> <div cl

  • Vue ELement Table技巧表格业务需求实战示例

    目录 前言 常见业务 需求:合并行 思路分析 需求合并列 思路分析 前言 在我们日常开发中,表格业务基本是必不可少的,对于老手来说确实简单,家常便饭罢了,但是对于新手小白如何最快上手搞定需求呢?本文从思路开始着手,帮你快速搞定表格. 常见业务 需求:合并行 1. 合并条码一样的两行 2. 触摸高亮关闭,表格颜色重一点 思路分析 调取element Table的回调 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当

  • 尤大大新活petite-vue的实现

    目录 前言 简介 上活 简单使用 根作用域 指定挂载元素 生命周期 组件 全局状态管理 自定义指令 内置指令 不支持 总结 前言 打开尤大大的GitHub,发现多了个叫 petite-vue 的东西,好家伙,Vue3 和 Vite 还没学完呢,又开始整新东西了?本着学不死就往死里学的态度,咱还是来瞅瞅这到底是个啥东西吧,谁让他是咱的祖师爷呢! 简介 从名字来看可以知道 petite-vue 是一个 mini 版的vue,大小只有5.8kb,可以说是非常小了.据尤大大介绍,petite-vue 是

  • Vue简单封装axios网络请求的方法

    目录 Vue简单封装axios网络请求 一.utils下的httpUtils.js: 二./api下的path.js: 三./api下的index.js: 四.组件中引入并请求: Vue简单封装axios网络请求 一.utils下的httpUtils.js: import axios from 'axios'; import querystring from 'querystring'; const errorHandler = (status, info) => { switch(status

  • Vue简单封装axios之解决post请求后端接收不到参数问题

    1.在src/下新建api文件夹,api/下新建index.js和public.js 在public.js中: import axios from 'axios'; import qs from 'qs' import router from '../router' import { MessageBox} from 'mint-ui' // 注意点,按照以下写 var instance = axios.create(); instance.defaults.timeout = 10000; i

  • vue简单封装axios插件和接口的统一管理操作示例

    本文实例讲述了vue简单封装axios插件和接口的统一管理操作.分享给大家供大家参考,具体如下: 现在很多公司的项目都是前后端分离的项目,那么说到前后端分离,必定会有ajax请求来获得后台的数据. 在做jquery项目的时候,我们都会使用它封装好的方法来直接发起ajax请求. 在vue项目中,我们使用最多的就是axios这个插件,下面就简单的封装下这个插件并且把接口给统一化管理. 一.安装和配置 1.在项目根目录下打开终端安装 npm install axios -S 2.安装完成以后,在src

  • vue封装axios的几种方法

    基础版 第一步:配置axios 首先,创建一个Service.js,这里面存放的时axios的配置以及拦截器等,最后导出一个axios对象.我平常elementUI用的比较多,这里你也可以使用自己的UI库. import axios from 'axios' import { Message, Loading } from 'element-ui' const ConfigBaseURL = 'https://localhost:3000/' //默认路径,这里也可以使用env来判断环境 let

  • vue中如何简单封装axios浅析

    把axios注入到Vue中 import axios from 'axios'; Vue.prototype.$axios = axios; import axios from 'axios' axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头 axios.defaults.withCredenti

  • 关于React Native使用axios进行网络请求的方法

    在前端开发中,能够完成数据请求的方式有很多,如Ajax.jQuery ajax.axios和fetch等.不过,随着技术的发展,现在能够看到的基本上也就axios和fetch两种. axios是一个基于Promise的Http网络库,可运行在浏览器端和Node.js中,Vue应用的网络请求基本都是使用它完成的.axios有很多优秀的特性,如支持请求的拦截和响应.取消请求.JSON自动转换.客户端防御XSRF等. 使用axios之前,需要先在项目中安装axios插件,安装命令如下. //npm n

  • node.js通过axios实现网络请求的方法

    1.使用Npm 下载axios npm install --save axios var update_url = axios.create({ baseURL:'debug url' }); update_url.get('/debug url').then(function (response){ //response 就是请求url 返回的内容 } 上述的方法请求文件时候,body的默认格式不是form-data.因此我们需要请求的数据格式为form-data的时候,需要使用下面的库 re

  • vue项目使用axios发送请求让ajax请求头部携带cookie的方法

    最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知axios默认是不让ajax请求头部携带cookie的,因此,在main.js中设置如下: import axios from 'axios' axios.defaults.withCredentials=true;//让ajax携带cookie Vue.prototype.$axios = axios

  • vue3学习笔记简单封装axios示例实现

    目录 简介 openapi 基本配置 拦截器 api请求 数据渲染 简介 axios是一个基于promise的网络请求库,管理后台使用的场景通常 获取后端api数据,然后交给页面渲染 还是在前面的示例项目上操作,安装axios最新0.27.2版本 cd HELLO-WORLD npm install axios 复制代码 openapi 在网上找到一个开放的openapi地址,免费且无需认证就可以使用 方便开发时模拟接口数据,但不能使用在生产环境中 该openapi返回json数据,比较符合我们

  • Flutter实现网络请求的方法示例

    Flutter网络请求使用的是Dio.Dio是一个强大易用的dart http请求库,支持Restful API.FormData.拦截器.请求取消.Cookie管理.文件上传/下载....... Flutter json数据解析是使用了json_serializable package包.它是一个自动化源代码生成器,可以为我们生成JSON序列化模板.由于序列化代码不再由我们手写和维护,我们将运行时产生JSON序列化异常的风险降至最低. Flutter网络请求数据并且展示效果图: 数据接口 数据

随机推荐