鉴于原生ajax调用产生的配置混乱等等一系列问题,实际项目中一般使用api更友好的axios来调用接口。
一个完整的请求大概流程是1、准备请求参数 2、设置请求函数(主要是包括请求方法、请求路径、有时还需设置请求头token、请求格式等等)3、处理请求成功、失败的情况。成功更新数据,失败一定要给予用户适当提示。
axios是基于promise用于浏览器和node.js的http客户端。
功能:
-
从浏览器中创建 XMLHttpRequest
-
从 node.js 中创建 http 请求
-
支持 Promise API
-
拦截请求和响应
-
转换请求和响应数据
-
取消请求
-
自动转换 JSON 数据
-
客户端支持防止 XSRF 攻击
好了,闲话休提,直接上代码吧。
准备工作:
一、创建项目
//创建项目
vue create axios-templete
//安装依赖
npm i axios
//启动
npm run serve
二、受制于同源策略的限制,我们需要先解决跨域工作,由于跨域工作非本文主旨,所以直接给出解决办法。
1、下载下列文件 存放在本地项目根目录,重启项目即可
https://github.com/gujianxiang95/axios-templete/blob/master/vue.config.js
https://github.com/gujianxiang95/axios-templete/blob/master/.env.production
https://github.com/gujianxiang95/axios-templete/blob/master/.env.development
三、配置路由写出我们所需的demo界面,方便调用接口。会了的同学跳过。
1、编写静态页面,src=>view目录下新建login文件夹=>新建index.vue文件
<template>
<div>
用户名:<input :value="name"> <br>
密码:<input :value="pwd" type="password"> <br>
<button @click="login">login</button>
</div>
</template>
<script>
export default {
data() { //定义双向绑定数据
return {
name: '',
pwd: '',
}
},
methods: { //存放方法
login(){
}
}
}
</script>
<style>
</style>
1、配置路由,路由文件目录src=>router=>index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const LOGIN = () => import("../views/login/index.vue") // 引入组件
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/login',//路由地址
name: 'Login',
component: LOGIN //该地址下展示的组件
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
axios基本使用
一、基本使用
1、src目录下新建axios文件夹=>新建login文件夹=>新建index.js文件,开始写调用接口的函数
import axios from 'axios' //引入axios
/*http请求方式 get post put delete
下面仅针对最常见的get post
实际开发中会因为传输的数据格式、请求头等等的不同,需要针对参数进行不同的设置(比如文件流、图片等等)
*/
/*
注意axios的get和post时,传递的参数格式是不一致的
get:
{
params:请求参数
}
post直接就是请求参数
*/
export const loginTest = (params)=>{ //export导出
return axios.get('/dev-api/wind/users/login-test',{
params
})
}
export const login = (params)=>{
return axios.post('/dev-api/wind/users/login-test',params)
}
2、
在<script>标签内顶部引入刚刚写好的调用函数
import { loginTest } from '../../api/login/index'
使用接口
login(){
const that = this
const param = {
name: that.name,
pwd: that.pwd
}
loginTest(param).then(res=>{//请求成功
console.log('loginTest=>err',res)//打印成功信息
if(res.code === 0){
alert('登录成功')
}else{
alert(res.code+res.msg)
//实际要看后端的提示语是否足够友好才能返回
}
},err=>{//请求失败
console.log('loginTest=>err',err)//打印失败信息
})
}
注意:接口返回成功并不代表你获得了正确的数据,只能代表和后台连接成功,比如本文中点击login使用的是logintest接口,在未登录时显然是不能返回用户成功登录后的一系列信息。这种情况只能代表接口调用成功,但数据不是我们所期望的,如果我们预期是Array数组,后端返回null,那么对null进行的一系列操作都很容易失败,会影响后续程序运行,因此我们需要作出一些容错处理。