1. Toy模板网首页
  2. > Toy博客

Vue全家桶（二）：Vue中的axios异步通信

7月前 作者：CaRuJan 分类：Toy博客 阅读(29) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue全家桶（二）：Vue中的axios异步通信。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. Axios

1.1 Axios介绍

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API [JS中链式编程]
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF（跨站请求伪造）
    GitHub：https://github.com/axios/axios
    中文文档：http://www.axios-js.com/

使用axios需要下载库
npm install axios --S

联系阅读：前端跨域

1.2 为什么使用Axios

1.axios：

  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 客户端支持防止CSRF
  • 提供了一些并发请求的接口（重要，方便了很多的操作）

2.jQuery ajax：

  • 本身是针对MVC的编程,不符合现在前端MVVM
  • 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
  • JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

1.3 Axios API

  • axios.request(config)

  • axios.get(url [，config])

  • axios.delete（url [，config])

  • axios.head(url [，config])

  • axios.post(url [，data [，config]])

  • axios.put(url [，data [，config]])

  • axios.patch(url [，data [，config]])

1.3 Vue使用axios向服务器请求数据

<template>
  <div class="footer">
    <ul>
      <li v-for="(item,index) in links" :key="index">
        <a href="item.url">{{item.name}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "MyFooter",
  data() {
    return {
      links: []
    }
  },
  mounted() {
    axios.get('http://api.eduwork.cn/admin/link').then(
    res => {
        this.links = res.data
    },
    error => {
    	console.log('请求失败了', error.message)
    }).catch(err=>{
       console.log(err);
    })
  }
}
</script>

<style scoped>
.footer {
  float: left;
  margin-top: 20px;
  width: 100%;
  height: 100px;
  background-color: cornflowerblue;
}
</style>

1.4 Vue使用axios向服务器提交数据

<template>
  <from action="#">
    网站名称: <input type="text" v-model="link.name">{{link.name}}<br>
    网站位置: <input type="text" v-model="link.url">{{link.url}}<br>
    位置排序: <input type="text" v-model="link.ord">{{link.ord}}<br>
    <input type="hidden" v-model="link.do_submit">{{link.do_submit}}<br>

    <button @click.prevent="doSubmit">添加数据</button>
  </from>
</template>

<script>
import axios from "axios";
export default {
  name: "MyConn",
  data() {
    return {
      num: 0,
      link: {
        name:'',
        url:'',
        ord: 0,
        do_submit: true
      }
    }
  },
  methods: {
    doSubmit() {
      axios.post('http://api.eduwork.cn/admin/link/add',this.link,{
        //将数据转换成字符串拼接
        transformRequest: [
            function (data) {
              let str = ''
              for (let key in data) {
                str += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&'
              }
              return str
            }
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(res=>{
        console.log(res);
      }).catch(err=>{
        console.log(err);
      })
    }
  }
}
</script>
<style scoped>
.myconn {
  width: 90%;
  height: 150px;
  background-color: brown;
  margin: 10px;
}
</style>

2. 为什么要封装Axios

axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。
不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍

这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用
举个例子：

axios('http://localhost:3000/data', {
  // 配置代码
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    return data;
  }],
  // 其他请求配置...
})
.then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);
}, (err) => {
  // 错误处理代码  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);
});

如果每个页面都发送类似的请求，都要写一堆的配置与错误处理，就显得过于繁琐了
这时候我们就需要对axios进行二次封装，让使用更为便利

3. 如何封装

封装的同时，你需要和 后端协商好一些约定，请求头，状态码，请求超时时间…

设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分

请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)

状态码: 根据接口返回的不同status ， 来执行不同的业务，这块需要和后端约定好

请求方法：根据get、post等方法进行一个再次封装，使用起来更为方便

请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问

响应拦截器： 这块就是根据 后端`返回来的状态码判定执行不同业务

3.1 设置接口请求前缀

利用node环境变量来作判断，用来区分开发、测试、生产环境.
我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了。


// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
}

在本地调试的时候，还需要在vue.config.js文件中配置devServer实现代理转发，从而实现跨域，我们在下面也会说到Vue实现跨域的方法。

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }

3.2 设置请求头与超时时间

大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置

const instance = axios.create({
    ...
    timeout: 30000,  // 请求 30s 超时
      headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})

content-type是http请求的响应头和请求头的字段。当作为响应头时，告诉客户端实际返回的内容的内容类型。作为请求头时，客户端告诉服务器实际发送的数据类型。

具体的Content-Type类型，查看content-type类型总结

3.3 封装请求方法

先引入封装好的方法，在要调用的接口重新封装成一个方法暴露出去

  • get方法：我们通过定义一个get函数，get函数有两个参数，第一个参数表示我们要请求的url地址，第二个参数是我们要携带的请求参数。get函数返回一个promise对象，当axios其请求成功时resolve服务器返回 值，请求失败时reject错误值。最后通过export抛出get函数。
  • post方法：原理同get基本一样，但是要注意的是，post方法必须要使用对提交从参数对象进行序列化的操作，所以这里我们通过node的qs模块来序列化我们的参数。这个很重要，如果没有序列化操作，后台是拿不到你提交的数据的。这就是文章开头我们import QS from 'qs';的原因。
/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get({ 
  url, 
  params = {} 
}) {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params: params     
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
*/
export function post({ 
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    instance({
      url,
      method: 'post',
      //将数据转换成字符串拼接
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

把封装的方法放在一个api.js文件中

import { get, post } from './request'
export const getorglist = (params = {}) => get({ url: 'apps/api/org/list', params })

页面中就能直接调用

// .vue
import { getorglist } from '@/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})

这样可以把api统一管理起来，以后维护修改只需要在api.js文件操作即可

3.4 请求拦截器

请求拦截器可以在每个请求里加上token，做了统一处理后维护起来也方便

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    const token = store.state.token;        
        token && (config.headers.Authorization = token);     
    return config
  },
  error => {
    return Promise.error(error)
  })

3.5 响应拦截器

响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权

// 响应拦截器
instance.interceptors.response.use(response => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授权调取授权接口
    } else if (response.data.code === 510) {
      // 未登录跳转登录页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我们可以在这里对异常状态作统一处理
  if (error.response.status) {
    // 处理请求失败的情况
    // 对不同返回码对相应处理
    return Promise.reject(error.response)
  }
})

3.6 Vue 封装axios（完整）

src/network/request.js

import axios from "axios";
import { Toast } from 'vant'; 

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
}

//创建axios实例，设置请求头
const instance = axios.create({
    //基础路径，发请求的时候，会在端口号后更改BaseURL
    baseURL:'http://api.eduwork.cn/admin',
    timeout: 30000,  // 请求 30s 超时
    headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get({ 
  url, 
  params = {} 
}) {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params: params     
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
*/
export function post({ 
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    instance({
      url,
      method: 'post',
      //将数据转换成字符串拼接
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    const token = store.state.token;        
    token && (config.headers.Authorization = token);      
    return config
  },
  error => {
    return Promise.error(error)
  }
)
  
// 响应拦截器
instance.interceptors.response.use(response => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授权调取授权接口
    } else if (response.data.code === 510) {
      // 未登录跳转登录页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我们可以在这里对异常状态作统一处理
  if (error.response.status) {
    // 处理请求失败的情况
    // 对不同返回码对相应处理
  	switch (error.response.status) {                
	       // 401: 未登录
	       // 未登录则跳转登录页面，并携带当前页面的路径
	       // 在登录成功后返回当前页面，这一步需要在登录页操作。                
	       case 401:                    
	           router.replace({                        
	               path: '/login',                        
	               query: { 
	                   redirect: router.currentRoute.fullPath 
	               }
	           });
	           break;
	
	       // 403 token过期
	       // 登录过期对用户进行提示
	       // 清除本地token和清空vuex中token对象
	       // 跳转登录页面                
	       case 403:
	            Toast({
	               message: '登录过期，请重新登录',
	               duration: 1000,
	               forbidClick: true
	           });
	           // 清除token
	           localStorage.removeItem('token');
	           store.commit('loginSuccess', null);
	           // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
	           setTimeout(() => {                        
	               router.replace({                            
	                   path: '/login',                            
	                   query: { 
	                       redirect: router.currentRoute.fullPath 
	                   }                        
	               });                    
	           }, 1000);                    
	           break; 
	
	       // 404请求不存在
	       case 404:
	           Toast({
	               message: '网络请求不存在',
	               duration: 1500,
	               forbidClick: true
	           });
	           break;
	       // 其他错误，直接抛出错误提示
	       default:
	           Toast({
	               message: error.response.data.message,
	               duration: 1500,
	               forbidClick: true
	           });
    }
    return Promise.reject(error.response)
  }
})

3.7 应用axios封装

提交数据

<template>
  <from action="#">
    网站名称: <input type="text" v-model="link.name">{{link.name}}<br>
    网站位置: <input type="text" v-model="link.url">{{link.url}}<br>
    位置排序: <input type="text" v-model="link.ord">{{link.ord}}<br>
    <input type="hidden" v-model="link.do_submit">{{link.do_submit}}<br>

    <button @click.prevent="doSubmit">添加数据</button>
  </from>
</template>
<script>
import {post} from '../../network/request'
export default {
  name: "MyConn",
  data() {
    return {
      num: 0,
      link: {
        name:'',
        url:'',
        ord: 0,
        do_submit: true
      }
    }
  },
  props: {
    article: {
      type: Array
    }
  },
  methods: {
    doSubmit() {
      post('/link/add',this.link).then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log(err);
        })
    }
  }
}
</script>

<style scoped></style>

请求数据

<template>
  <div class="footer">
    <ul>
      <li v-for="(item,index) in links" :key="index">
        <a href="item.url">{{item.name}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import {get} from '.../network/request'
export default {
  name: "MyFooter",
  data() {
    return {
      links: []
    }
  },
  mounted() {
    get('/link',{id:1}).then(res=>{
        this.links = res.data
      }).catch(err=>{
       console.log(err);
    })
  }
}
</script>

<style scoped></style>

4. Vue中axios封装与api接口封装管理(优化)

4.1 axios封装

axios的封装根据需求的不同而不同。

  • 优化axios封装，去掉的get和post
  • 断网情况处理
  • 更加模块化的api管理
  • 接口域名有多个的情况
  • api挂载到vue.prototype上省去引入的步骤

在项目的src目录下，新建一个network文件夹，作为网络请求模块，request.js封装axios，api下的index.js用来统一管理接口。
src/network/http.js

/**
 * axios封装
 * 请求拦截、响应拦截、错误统一处理
 */
import store from "@/store";
import axios from "axios";
import QS from 'qs';           // 引入qs模块，用来序列化post类型的数据，后面会提到
import { Toast } from 'vant';          // vant的toast提示框组件，可根据自己的ui组件更改。
import nprogress from "nprogress";    //引入加载进度条
import "nprogress/nprogress.css"      //引入加载进度条样式

/** 
 * 提示函数 
 * 禁止点击蒙层、显示一秒后关闭
 */
const tip = msg => {    
    Toast({        
        message: msg,        
        duration: 1000,        
        forbidClick: true    
    });
}

/** 
 * 跳转登录页
 * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
 */
const toLogin = () => {
    router.replace({
        path: '/login',        
        query: {
            redirect: router.currentRoute.fullPath
        }
    });
}

/** 
 * 请求失败后的错误统一处理 
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status, message) => {
  switch (status) {
    case 401:     
      //store.dispatch('userLogout')
      // 401: 未登录
      // 未登录则跳转登录页面，并携带当前页面的路径
      // 在登录成功后返回当前页面，这一步需要在登录页操作。 
      toLogin()
      break
    case 403:
      // 403 token过期
      // 登录过期对用户进行提示
      // 清除本地token和清空vuex中token对象
      // 跳转登录页面
      tip('登录过期，请重新登录')     
      // 清除token
      localStorage.removeItem('token');
      store.commit('loginSuccess', null);  
      // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
      setTimeout(() => {                        
          toLogin();                  
      }, 1000); 
      break
    case 404:
      // 404请求不存在
      tip('请求的资源不存在')     
      break
    default: 
      Toast.failed(message)
  }
}

// 创建axios实例,
const instance  = axios.create({
    //baseURL:'/api',        //基础路径，requests发出的请求在端口号后面会跟改baseURl，这里的接口可能有多个域名的情况，后面会通过js变量来控制接口api域名
    timeout: 5000,           // 请求超时时间
    withCredentials: true,    // 允许携带cookie
    headers: {                 //设置post请求头
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
})


/** 
 * 请求拦截器 
 * 每次请求前，如果存在token则在请求头中携带token 
 */ 
instance.interceptors.request.use(
    //config内主要是对请求头Header配置
    config => {
        // 每次发送请求之前判断vuex中是否存在token        
        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
        // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。   
        if(store.state.user.token) {
            config.headers.token = store.state.user.token
            //有些接口是 config.headers.Authorization = token
        }
        //开启进度条
        nprogress.start()
        return config;
    },
    error => Promise.reject(error)
)

//配置响应拦截器
instance.interceptors.response.use(
	// 请求成功
    response => {
    	//响应成功，关闭进度条
        nprogress.done()
		// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
        // 否则的话抛出错误
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }   
    },
    // 服务器状态码不是2开头的的情况
    // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    // 下面列举几个常见的操作，其他需求可自行扩展
    error => {
    	const { response } = error
    	if(response) {
    		// 请求已发出，但是不在2xx的范围 
    		errorHandle(response.status, response.data.message || '网络连接失败，请稍后重试！')
    		return Promise.reject(error)
    	} else {
    		// 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            if (!window.navigator.onLine) {
               store.commit('changeNetwork', false);
            } else {
                return Promise.reject(error);
            }
    	}  
    }
)

//对外暴露
export default instance;

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，但是后台可以选择不接收啊！

4.2 api接口统一管理

为了使得api接口管理

  1. 更加模块化
  2. 更方便多人开发，有效减少解决命名冲突
  3. 处理接口域名有多个情况

这里这里呢新建了一个api文件夹，里面有一个index.js和一个base.js，以及多个根据模块划分的接口js文件。index.js是一个api的出口，base.js管理接口域名，其他js则用来管理各个模块的接口。

src/network/index.js

// 在当前这个模块：API进行统一管理
import requests from "./http";
import mockAjax from './mockAjax'   //模拟数据接口

/*--------- 首页 ---------*/

//三级联动接口
// export const reqCategoryList = ()=>{
//     //发请求,request模块已经配置了/api，可以去掉/api,
//     return requests({url: '/product/getBaseCategoryList',method: 'get'})
// }
//简化写法
export const reqCategoryList = ()=> requests.get('/product/getBaseCategoryList')

//获取广告轮播列表
export const reqBannersList = ()=> mockAjax.get('/banners')

//获取首页楼层列表
export const reqFloors = ()=> mockAjax.get('/floors')


/*--------- 商品列表 ---------*/

//请求搜索匹配的商品商品的相关数据，给服务器传递的serachParam，至少是一个空对象，否则会请求失败
export const reqSearchList = (searchParams) => requests({url:'/list', method:'post', data: searchParams})

//获取产品详情
export const reqGoodsInfo = (goodId)=> requests({url: `/item/${goodId}`, method:'get'})

/*--------- 购物车 ---------*/

若是需要分模块管理api接口
可以在src下新建一个api接口，里面有一个index.js，以及多个根据模块划分的接口js文件。index.js是一个api的出口，其他js则用来管理各个模块的接口。

src/api/index.js

/** 
 * api接口的统一出口
 */
// 文章模块接口
import article from '@/api/article';
// 其他模块的接口…… 
// 导出接口
export default {    
    article,
    // ……
}

index.js是一个api接口的出口，这样就可以把api接口根据功能划分为多个模块，利于多人协作开发，比如一个人只负责一个模块的开发等，还能方便每个模块中接口的命名哦。

src/api/base.js

const base = {    
    sq: 'https://xxxx111111.com/api/v1',    
    bd: 'http://xxxxx22222.com/api'
}

export default base;

通过base.js来管理我们的接口域名，不管有多少个都可以通过这里进行接口的定义。即使修改起来，也是很方便的。

最后就是接口模块的说明，例如上面的article.js:
src/api/article.js

/**
 * article模块接口列表
 */
import requests from "@/network/http";  // 导入request中创建的axios实例
import base from './base'; // 导入接口域名列表
import qs from 'qs'; // 根据需求是否导入qs模块 
const article = {    
    // 新闻列表    
    articleList () {        
       return requests.get(`${base.sq}/topics`) 
    },    
    // 新闻详情,演示    
    articleDetail (id, params) {        
         return requests.get(`${base.sq}/topic/${id}`, {
         	params: params
         })
    },
    // 新闻详情,演示 (另外一种写法)  
    articleDetail(id, params) {
		return requests({
              url: `${base.sq}/topic/`,
              method: 'get',
              params:{ id },
              hideloading: true
            })
	},
	// post提交    
    login (params) {        
        return requests.post(`${base.sq}/accesstoken`, qs.stringify(params));    
    },
    // post提交 (另外一种写法)      
    login (params) {        
      return requests({
	      url:`${base.sq}/accesstoken`,
	      method:'post',
	      data:qs.stringify(params), //注意post提交用data参数
	      hideloading: true
     })   
    },
    // 其他接口…………
}
export default article;
  1. 通过直接引入我们封装好的axios实例，然后定义接口、调用axios实例并返回，可以更灵活的使用axios，比如你可以对post请求时提交的数据进行一个qs序列化的处理等。
  2. 请求的配置更灵活，你可以针对某个需求进行一个不同的配置。关于配置的优先级，axios文档说的很清楚，这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。
  3. restful风格的接口，也可以通过这种方式灵活的设置api接口地址。

4.3 在组件中使用

import {article} from '@/api/index'
created(){
   article.articleList().then(info=>{
       if(info.code==200)
     this.num=info.data
  }
     })
}

4.4 api挂载到vue.prototype上省去引入的步骤

为了方便api的调用，我们需要将其挂载到vue的原型上。在main.js中：

import Vue from 'vue'
import App from './App'
import router from './router' // 导入路由文件
import store from './store' // 导入vuex文件
import * as api from '@/api'  //统一接口api
new Vue({
    render: (h) => h(App),
    beforeCreate() {
    	//全局事件总线
    	Vue.prototype.$bus = this;
        Vue.prototype.$api = api;     // 将api挂载到vue的原型上
  },
})

在组件中使用

//无需导入
methods: {    
    onLoad(id) {      
        this.$api.article.articleDetail(id, {        
            api: 123      
        }).then(res=> {
            // 执行某些操作      
        })    
    }  
}

再提一下断网的处理，这里只做一个简单的示例：
App.vue

<template>  
    <div id="app">    
        <div v-if="!network">      
            <h3>我没网了</h3>      
            <div @click="onRefresh">刷新</div>      
        </div>    
        <router-view/>      
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {  
     name: 'App',  
     computed: {    
         ...mapState(['network'])  
     },  
     methods: {    
         // 通过跳转一个空页面再返回的方式来实现刷新当前页面数据的目的
         onRefresh () {      
             this.$router.replace('/refresh')    
         }  
     }
 }
</script>

在request.js中介绍了，我们会在断网的时候，来更新vue中network的状态，那么这里我们根据network的状态来判断是否需要加载这个断网组件。断网情况下，加载断网组件，不加载对应页面的组件。当点击刷新的时候，我们通过跳转refesh页面然后立即返回的方式来实现重新获取数据的操作。因此我们需要新建一个refresh.vue页面，并在其beforeRouteEnter钩子中再返回当前页面。

推荐阅读：
axios 最详细封装(一)
vue项目封装 axios 和 api
详解vue中axios封装与api接口封装管理

5. 使用Vue-cli解决Ajax跨域问题

使用vue-cli开启代理服务器ajax跨域问题

方法一：在vue.config.js中添加如下配置：

module.exports={
	//开启代理服务器，配置跨域请求
	devServer:{
	  proxy:"http://localhost:5000"
	}
}

优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源），在同级目录public下，是前端资源，现在前端资源找，没有才会请求服务器。

方法二：编写vue.config.js配置具体代理规则：

module.exports = {
devServer: {
	open: true, //是否自动打开浏览器
	https: false, //是否开启https
	hotOnly: false,
    proxy: {         //配置跨域
      '/api1': {
        // 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000', // 将请求代理到目标服务器上
        changeOrigin: true,
        //重写路径 将请求中的/api1 重写为为空字符串,否则代理请求发到服务器，是请求/api1/xxx下的东西，服务器里不一定有api1,需要把api1去掉
        pathRewrite: { '^/api1': '' },
        ws: true,           //用于支持websocket
        changeOrigin: true, //用于控制请求头中的host值
      },
      '/api2': {
        // 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001', // 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: { '^/api2': '' },
        ws: true,           //用于支持websocket
        changeOrigin: true, //用于控制请求头中的host值
      },
    },
  },
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。

App.vue

<template>
  <div id="app">
    <!-- 在8080端口上获取5000和5001端口上的数据  -->
    <button @click="getStudents">获取学生信息</button>
    <button @click="getCars">获取汽车信息</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  methods: {
    getStudents() {
      //这里加前缀api1走代理，不加前缀api1就不走代理，找前端资源，即public目录下
      axios.get("http://localhost:8080/api1/students").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
    getCars() {
      axios.get("http://localhost:8080/api2/cars").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
  },
};
</script>

Vue全家桶（二）：Vue中的axios异步通信

6. GitHub用户搜索案例

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器端的特殊配置，含义市让IE浏览器以最高渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想端口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 引入第三方样式 -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

scr/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

src/components/Search.vue

<template>
  <div>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyWord" />&nbsp;
            <button @click="searchUsers">Search</button>
        </div>
    </section>
  </div>
</template>

<script>
import axios from "axios"
export default {
    name:'Search',
    components: {},
    props: {},
    data() {
        return {
            keyWord: ""
        };
    },
    methods: {
        searchUsers() {
            //请求前更新List数据
            this.$bus.$emit('updateListData', {isFirst: false, isLoading:true, errMsg: '', users:[]})
            axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                response => {
                    // console.log('请求成功了',response.data.items);
                    this.$bus.$emit('updateListData', {isLoading:false, errMsg: '', users:response.data.items})

                },
                error => {
                    console.log('请求失败了')
                    this.$bus.$emit('updateListData', {isLoading:false, errMsg: error.message, users:[]})
                })
        },
    }
};
</script>
<style lang="less" scoped>

</style>

src/components/List.vue

<template>
    <div class="row">
        <!-- 展示用户列表 -->
        <div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
            <a :href="user.html_ur" target="_blank">
            <img :src="user.avatar_url" style='width: 100px'/>
            </a>
            <p class="card-text">{{user.login}}</p>
        </div>
        <!-- 展示欢迎词 -->
        <h3 v-show="info.isFirst">welecom to use</h3>
        <!-- 展示加载中 -->
        <h3 v-show="info.isLoading">loading.....</h3>
        <!-- 展示错误信息 -->
        <h3 v-show="info.errMsg">{{info.errMsg}}</h3>
    </div>
</template>

<script>
export default {
  name: 'List',
  components: {},
  props: {},
  data() {
    return {
      info: {
        isFirst: true,
        isLoading: false,
        errMsg: "",
        users: []
      }
    };
  },
  mounted() {
    this.$bus.$on('updateListData', (dataObj) =>{
        // console.log('List组件收到数据',dataObj);
        // 通过对象扩展运算符，合并对象
        this.info = {...this.info, ...dataObj}
    })
  }
};
</script>

<style scoped>

.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}

</style>

App.vue

<template>
  <div class="container">
    <Search/>
    <List/>
  </div>
</template>

<script>
import Search from './components/Search'
import List from './components/List.vue'
export default {
  name: 'App',
  components: {Search,List}
}
</script>

<style>
</style>

效果
Vue全家桶（二）：Vue中的axios异步通信

7. Vue-resource

Vue项目常用的两个Ajax库

  1. axios : 通用的Ajax请求库，官方推荐，效率高
  2. vue-resource: vue插件库，vue 1.x使用广泛，官方已不维护
    下载vue-resource 库 npm i vue-resource
    使用vue-resource Vue.use(VueResource)

src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
//使用插件
Vue.use(VueResource)

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

src/components/Search.vue文章来源地址https://www.toymoban.com/news/detail-490554.html

export default {
    name:'Search',
    components: {},
    props: {},
    data() {
        return {
            keyWord: ""
        };
    },
    methods: {
        searchUsers() {
            //请求前更新List数据
            this.$bus.$emit('updateListData', {isFirst: false, isLoading:true, errMsg: '', users:[]})
            //还是github搜索案例，但是使用this.$http来使用vue-resource，其他不变
            this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                response => {
                    // console.log('请求成功了',response.data.items);
                    this.$bus.$emit('updateListData', {isLoading:false, errMsg: '', users:response.data.items})

                },
                error => {
                    console.log('请求失败了')
                    this.$bus.$emit('updateListData', {isLoading:false, errMsg: error.message, users:[]})
                })
        },
    }
};

到了这里，关于Vue全家桶（二）：Vue中的axios异步通信的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Vue+Axios的方法异步回调顺序问题

    Vue+Axios的方法异步回调顺序问题

    一、问题阐述 有的时候我们需要控制异步函数的执行顺序，比如a方法中如果要用到异步函数b方法的请求结果，就需要进行顺序控制，否则a函数先执行就会导致找不到数据直接报错。 二、方法 1.异步控制 1.1.async，await等做异步控制 1.2修改函数放置位置达到异步控制效果（我

    2024年03月09日
    浏览(42)
  • Vue 网络处理 - axios 异步请求的使用，请求响应拦截器（最佳实践）

    Vue 网络处理 - axios 异步请求的使用，请求响应拦截器（最佳实践）

    目录 一、axiox 1.1、axios 简介 1.2、axios 基本使用 1.2.1、下载核心 js 文件. 1.2.2、发送 GET 异步请求 1.2.3、发送 POST 异步请求 1.2.4、发送 GET、POST 请求最佳实践 1.3、请求响应拦截器 1.3.1、拦截器解释 1.3.2、请求拦截器的使用 1.3.3、响应拦截器的使用 1.3.4、拦截器在 Vue 脚手架中的

    2024年02月04日
    浏览(31)
  • Java网络开发（Asynchronous异步）—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求

    Java网络开发（Asynchronous异步）—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求

    如果想做bilibili那样的边看视频边评论怎么搞？； 之前用jsp的方式，是无法实现这个需求的，因为每次评论后提交了评论，会把整个页面全部刷新，导致视频也回到未播放的初始状态，如下所示： 代码为： 这是因为，在每次浏览器请求后，只能等待服务器的响应，即这种方

    2024年02月09日
    浏览(37)
  • Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南

    Vue中JSON文件神奇应用fetch、axios异步加载与模块导入全指南

      在Vue中使用JSON文件有多种方式，包括使用 fetch 方法加载JSON文件、使用 axios 库加载JSON文件，以及将JSON文件导入为模块。以下是详细描述和相应的示例代码： 创建一个 JSON 文件，例如  data.json ： 在Vue组件中使用  fetch  方法加载 JSON 文件： 安装  axios  库： 在Vue组件中使

    2024年02月19日
    浏览(32)
  • IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向

    IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向

    💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ！ Vue 是一套用于构建 用户界面 的渐进式 JavaScript 框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注 视图层 ，不仅易于上手，还便于与第三方库或既有项目 整合 。另一方面，当

    2024年04月13日
    浏览(121)

  • vue写一个axios的拦截器

    要编写并生效Axios拦截器，可以按照以下步骤进行操作： 1.创建一个文件：在你的项目中，创建一个新的JavaScript文件，例如interceptors.js，用于编写拦截器代码。 2.导入所需的库和模块：在interceptors.js文件中，导入所需的Axios库和其他依赖项。 // 其他依赖项的导入 3.创建Axios实

    2024年02月12日
    浏览(47)

  • vue的vue-resource和axios介绍

    在Vue项目中前后端交互时，早期Vue使用Vue-resource实现异步请求。 从Vue2.0之后就不再对vue-resource进行更新，Vue官方推荐使用axios。 Vue.js的插件提供了使用XMLHttpRequest 或 JSONP进行Web请求和处理响应的服务。vue-resource像jQuery的$,ajax，用来进行数据交互。主要用于发送ajax请求。 1.体

    2024年01月23日
    浏览(23)

  • axios的使用、Vue中的动画、vue组件

    一、 先引用，然后         created(){             axios.post(this.baseUrl + \\\'/weChat/applet/course/list/type\\\', formurl) .then((res) = {}) .catch()         }, 二、 使用 过渡类名 HTML结构： div id=\\\"app\\\"     input type=\\\"button\\\" value=\\\"动起来\\\" @click=\\\"myAnimate\\\"       !-- 使用 transition 将需要过渡的元素包裹起来

    2024年02月07日
    浏览(24)
  • vue中axios的介绍及封装(看这一篇就够了!)

    vue中axios的介绍及封装(看这一篇就够了!)

    ​🌈个人主页：前端青山 🔥系列专栏：Vue篇 🔖 人终将被年少不可得之物困其一生 依旧 青山 ,本期给大家带来vue篇专栏内容:vue-axios 目录 一、axios是什么 二、实现一个简易版axios 三、源码分析 小结 四、axios的使用 特性 基本使用 五、为什么要封装 六、如何封装 设置接口请

    2024年01月24日
    浏览(28)
  • 解决axios异步请求问题（异步变为同步）

    解决axios异步请求问题（异步变为同步）

    在目前一个需求中，我需要等待axios请求完成后，判断请求是否出现异常，然后来判断是否关闭弹窗 修改后大概代码如下： 原来在方法中没有使用 async 和 await ，由于发送的axios请求是异步请求，所以在请求还没完成的时候 submitForm 这个方法就已经将 flag 返回了 这就导致了一

    2024年02月03日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包