vue2+axios接口调用实践

鉴于原生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进行的一系列操作都很容易失败，会影响后续程序运行，因此我们需要作出一些容错处理。