vue项目中axios请求网络接口封装

每个项目网络请求接口封装都是很重要的一块，第一次做Vue项目，我们的封装方法如下：

(1).新建一个js文件，取名api.js

(2).引入 axios ，mint-UI ,如下图：

import axios from 'axios'
import {MessageBox, Toast} from 'mint-ui'axios.defaults.timeout = 50000//默认请求超时时间
axios.defaults.headers = '请求头'

(3).封装get方法

export function getHttp (url, params = {}) {// 创建动画mint-uiIndicator.open({text: '加载中...',spinnerType: 'fading-circle'})return new Promise((resolve, reject) => {axios.get(url, {params: params}).then(response => {resolve(response.data)Indicator.close() // // 关闭动画}).catch(err => {reject(err)Indicator.close() // // 关闭动画MessageBox.alert('message', err)})})
}

(4).封装post方法

export function postHttp (url, data = {}) {Indicator.open({text: '加载中...',spinnerType: 'fading-circle'})return new Promise((resolve, reject) => {axios.post(url, data).then(response => {if (response.data.status == 1) {resolve(response.data)} else {Toast(response.data.msg)}Indicator.close() // // 关闭动画}, (err) => {reject(err)Indicator.close()})})
}

(5).封装后方法的使用

在main.js中引入全局变量

import {getHttp, postHttp} from './config/api'
Vue.prototype.$getHttp = getHttp
Vue.prototype.$postHttp = postHttp

    //get网络请求this.$getHttp(this.$shopUrl + 'api/product/list',).then((response) => {response.result//请求返回数据})// post网络请求this.$postHttp(this.$shopUrl + 'api/product/list',).then((response) => {response.result//请求返回数据})

vue项目中axios请求网络接口封装相关推荐

vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...
vue项目中 axios 请求成功却进入catch中
这个算是线上的一个小问题吧就是我本来打算对接口返回的数据进行统一处理. 发现有的请求成功后并没有走 Promise.then的方法中, 像这种情况的话网上网友的有的说是我的then的方法里面有 ...
vue中axios请求的封装
axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以 ...
axios与ajax对比,vue体系中axios请求对比jquery-ajax请求
前提老旧的项目在前端页面转型为vue框架的时候都应该会思考一个问题: 在请求上是继续沿用以前的jquery-ajax,还是改用与vue搭配的axios 如果你继续使用jquery-ajax那么以下的 ...
Vue项目中前端请求后端数据的两种方式
1.JS方式,使用fetch函数,较底层 //JS方式请求分页数据 fetch("http://localhost:9090/user/page?pageNum=" +this.p ...
vue项目中axios的封装
1.安装 1 npm install axios --save 2.新建http.js,封装拦截器以及多种请求方式 1 import axios from 'axios'; 2 import { Me ...
vue项目中axios配置（代理配置）
一.引入axios包 npm install sxios --save 二.建立axios文件夹在src根目录下新建api文件夹在api文件夹下新建ajax.js和index.js文件 ajax. ...
vue项目中使用ckplayer.js封装视频播放组件
1.在index.html中引入ckplayer.js <script src="ckplayer/ckplayer.js" charset="utf-8" ...
在vue项目中对axios进行封装
在vue项目中对axios进行封装 1.引入axios,qs模块 import axios from 'axios'; import Qs from "qs"; import st ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...

vue项目中axios请求网络接口封装

vue项目中axios请求网络接口封装相关推荐

最新文章

热门文章