vue使用axios调用接口
vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,这个axios也是vue官方推荐的库。
axios的官方github: https://github.com/mzabriskie/axios
首先在自己的项目中新建一个request文件夹和utils文件夹。然后在目录下创建这几个文件
一、安装axios
npm install axios --save
二、封装axios 、配置request文件夹 config.js
export const baseURL = 'http://www.aistool.com' // 请求的url地址baseUrl export const ERR_OK = '00000' // 请求成功校验码 export default {
baseURL
}
三、配置utils文件夹 index.js
// 把获取到的数据通过调用JSON.parse()方法转换成对象
export const isJSON = s => {
try {
JSON.parse(s)
} catch (e) {
return false
}
return true
}
四、配置http.js
import axios from 'axios'
import config from './config'
import { isJSON } from '../utils' const instance = axios.create({
baseURL: config.baseURL
}) instance.defaults.transformRequest = [
function (data) {
return data
}
]
// 添加响应拦截器
instance.defaults.transformResponse = [
function (data) {
if (isJSON(data)) {
return JSON.parse(data)
}
return data
}
] export default instance
五、在request文件夹下新建index.js,用于封装get、post等请求
import http from './http' // 封装 get 请求 返回的是一个promise
export function get (url, params) {
return new Promise((resolve, reject) => {
http.get(url, { params }).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
// 封装 post 请求 返回的是一个promise
export function post (url, params) {
return new Promise((resolve, reject) => {
http.post(url, JSON.stringify(params), {
headers: {
'Content-Type': 'application/json'
}
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
// 获取轮播图数据
export const getSwiper = data => get('/ftzs/adimg/rotation/list', data)
六、在页面中的使用
这里千万要注意路径的引用问题
在data()方法中配置getswiperList
在mounted生命周期函数中调用这个方法
在methods定义这个方法 到控制台查看打印内容
【参考链接】:
vue使用axios调用接口的更多相关文章
- vue中axios调用接口和用node.js跨域
<script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...
- axios调用接口
axios调用接口 1. 按照axiosnpm install --save-dev axios2.在main.js 引入axios, 设置全局属性$http 指向axios main.js impo ...
- vue 配合vue-resource调用接口,获取数据
1.先用node+express+mysql简单配置一下后台 const express = require('express');const mysql = require('mysql');con ...
- vue项目axios请求接口,后端代理请求接口404,问题出现在哪?
在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中 ...
- vue使用axios调用豆瓣API跨域问题
最近做了一个vue小demo,使用了豆瓣开源的API,通过ajax请求时需要跨域才能使用. 封面.jpg 一.以下是豆瓣常用的开源接口: 正在热映 :https://api.douban.com/ ...
- Nuxt服务端使用Axios调用接口时传递cookies
个人博客 地址:http://www.wenhaofan.com/article/20190321183709 介绍 在做单点登录时,后端需要根据cookie获取登录用户,由于前端项目使用了Nuxt做 ...
- vue 利用axios请求接口下载excel
一般有三种方法: 方法一: 通过a标签下载 // href为文件的存储路径或者地址,download为问文件名 <a href="/images/download.jpg" ...
- vue 中使用 axios 请求接口,请求会发送两次问题
在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果:只有第二次请求时才会有相应的请求参数以及请求结果: 那为甚么会有这么一次额外的请求呢,后 ...
- 05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例
目标 /* 1. 说出什么是前后端交互模式 2. 说出Promise的相关概念和用法 3. 使用fetch进行接口调用 4. 使用axios进行接口调用 5. 使用asynnc/await方式调用接口 ...
随机推荐
- Mysql到Java数据类型映射的JDBC规范
- Android本地数据存储: ASimpleCache
一:前言 在上一篇博客Android本地数据存储: Reservoir 博客中,我提到,除了Reservoir库,还可以采用ASimpleCache开源库,来实现本地数据存储.昨天并没有仔细的对比Re ...
- H3C ISDN DCC备份配置示例
- Python 3.7.0 For Mac版软件安装教程附下载地址
https://www.jianshu.com/p/f02d6f01eba7
- java Jre和Jdk的区别?
JRE:(Java Runtime Environment),java运行环境.包括Java虚拟机(JVM Java Virtual Machine)和Java程序所需的核心类库等,如果想要运行一个开 ...
- js利用select标签生成简易计算功能
html中使用select option作为运算符的承接容器,输入值,选择不同运算符,计算结果. 文章地址 https://www.cnblogs.com/sandraryan/ <!DOCTY ...
- ArrayList中remove方法和set(null)的区别
在分析源码ArrayList.remove()时,偶然发现了一个疑惑的点,就是:源码也是将最后一个对象的引用指向null(源码:elementData[--size] = null; // clear ...
- SourceYard 制作源代码包
本文带大家走进SourceYard开发之旅 在项目开发中,将一个大的项目拆为多个小项目解耦,减少模块之间的耦合.因为如果将代码放在一起,即使有团队的约束,但只要能写出的代码就会有小伙伴写出,很快就发现 ...
- 1626 - Brackets sequence——[动态规划]
Let us define a regular brackets sequence in the following way: Empty sequence is a regular sequence ...
- 基于Springboot+Junit+Mockito做单元测试
前言 前面的两篇文章讨论过< 为什么要写单元测试,何时写,写多细 >和<单元测试规范>,这篇文章介绍如何使用Springboot+Junit+Mockito做单元测试,案例选取 ...