nuxt之axios 二次封装

所以，这个坑好深。

找了一天 直接贴出nuxt官网给的  demo吧，你看了就懂了，https://github.com/nuxt-community/express-template/tree/master/template

不懂的小白继续往我下面看吧

首先说下封装的意义吧，axios 的请求路径  我测试的时候用的接口站提供的 链接  url和我正式部署上去服务器的  域名url肯定是不一样的

那如果你每个页面都来一句

axios.get('https://jsonplaceholder.typicode.com/posts')

域名一变你脸是不是就黑了 

所以 我们肯定要把这个http://域名给抽出来

好吧，进入正题，

首先 你要在
plugins 下 新建一个axios.js

代码如下

import * as axios from 'axios'

let options = {}
// The server-side needs a full url to works
if (process.server) {
	options.baseURL =`https://jsonplaceholder.typicode.com/`
  //options.baseURL = `http://${process.env.HOST || 'jsonplaceholder.typicode.com/'}:${process.env.PORT || 3000}`
}

export default axios.create(options)

index.vue页面

import axios from '~/plugins/axios'

asyncData (op) {//请求
			return axios.get('posts')
		      .then((res) => {
		        return { posts: res.data.slice(0, 5) }
		      })
		},

恩  应该可以理解吧  ，我说的应该挺详细了

nuxt 自定义全局方法、全局属性、全局变量解决方案

好，点不点赞看你了，或者 可以加入 我的 群153181864  前端交流群 ，绝对原创，转载请附上 本微博链接。