vue请求axio的使用详解

安装
npm install axios

创建axios实例

import axios from 'axios'
//判断是否是本地开发环境，这样上线就不用更改，不了解，可以直接写
const host = process.env.NODE_ENV === "development"? "模拟地址" : "真实地址"
axios.defaults.withCredentials = true //开启后服务器才能拿到cookieaxios.defaults.crossDomain = true;//配置axios跨域axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'//配置默认请求头const ajax = axios.create({basURL:host,timeout: 6000,//请求超时时间})

axio的拦截器

对请求拦截

ajax.interceptors.request.use((req)=>{//请求拦截下的数据，可以添加自己的处理和操作比如添加loading效果return req
})

对响应的拦截

ajax.interceptors.response.use((res)=>{//响应拦截下的数据，可以添加自己的处理和操作比如添加loading效果或者return res.data.body
})
export default ajax//最后导出

使用方式

全局使用在main.js（主入口）中

import * as $http from './requests'
Vue.protoype.$http = $http
这样可在this中调用$http来使用ajax

新建一个api文件夹，用于管理请求的js文件，在文件夹中分块，建立js文件

//简单示例一个 创建一个api.js
import  request    from '@/utils/request' //引入导出的ajax
//使用方式也有2种
export const getData= （params）=>{ //get请求request.get('data/user', {params: {ID: params}})
}
expot const getData2 = (params) =>{ //post请求request.post('data/user', {...params})
}
//第二种方式
export function getData3(data) { //postreturn request({url: 'data/list',method: 'post',data: { ...data }})
}export function getData4(id) { //getreturn request({url: 'data/one?id=' + id,method: 'GET'})
}

axio基于promise调用后返回一个then（callback）方法，

在vue页面只需要引入调用即可

<script>
import { getData, getData2, getData4 } from '@/api/api'export default {data() {return {}}，methods: {const params = '你传的参数'getData(params).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});}}
</script>

vue请求axio的使用详解相关推荐

keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
php 请求拦截,解决拦截器对ajax请求的拦截实例详解
解决拦截器对ajax请求的的拦截拦截器配置:public boolean preHandle(HttpServletRequest request, HttpServletResponse resp ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
node作为java中间间_node作为中间服务层如何发送请求(发送请求的实现方法详解)...
GET请求: var http = require('http'); var qs = require('querystring'); var data = { a: 123, time: new D ...
减少HTTP请求之合并图片详解（大型网站优化技术）
一.相关知识讲解看过雅虎的前端优化35条建议,都知道优化前端是有多么重要.页面的加载速度直接影响到用户的体验.80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样 ...
requests之get请求带参数示例详解
具体见以下详细步骤获取响应数据获取请求头获取响应头.状态码有两点需要引起注意: a.响应结果一般有三种格式:HTML.json.text b.text方法返回的是字符串格式的内容获取cook ...
Vue的生命周期过程详解
Vue的生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的 ...
Vue 中的 ref 属性详解
Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
《前端》权限链接--vue前端权限控制方案详解附demo_feiyu_may的博客-CSDN博客_vue 前端权限
前端权限控制 - 潘正 - 博客园 https://www.cnblogs.com/guchengnan/p/11800947.html vue前端权限控制方案详解附demo_feiyu_may的博 ...

vue请求axio的使用详解

vue请求axio的使用详解

vue请求axio的使用详解相关推荐

最新文章

热门文章