nuxt数据请求

1.创建项目（自行百度）
2.安装axios、proxy模块
在项目按住‘shift’+鼠标右键，打开命令窗口，输入npm i @nuxtjs/axios @nuxtjs/proxy -D，会自动下载axios和proxy模块（解决跨域问题）
3.修改nuxt.config.js
在nuxt.config.js里添加代码

export default{
	...
	modules: [
    	'@nuxtjs/axios',
    	'@nuxtjs/proxy'
	],
	axios: {
		proxy: true,
	},
	proxy: {
		'/api': {
			target: 'https://xxx.com/api', // 你的接口服务器地址，以我自己的项目
			pathRewrite: {
				'^/api' : '/'
			}
		}
	}
}

4.创建请求js

import axios from 'axios'
let cancel ,promiseArr = {}//promiseArr拦截使用
const CancelToken = axios.CancelToken
axios.defaults.baseURL = '/api'

axios.defaults.headers = {
  'X-Requested-With': 'XMLHttpRequest',
  'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
//请求超时时间
axios.defaults.timeout = 30000

// 跨域是否带cookie
axios.defaults.withCredentials = false
export default{
  //get请求
  get(url, data) {
    return new Promise((resolve) => {
      axios({
        method: 'get',
        url: url,
        params: data,
        cancelToken: new CancelToken(c => {
          cancel = c
        })
      }).then(res => {
        resolve(res)//注意点1
      })
    })
  },
  //post请求
  post(url, data) {
    let storage = window.localStorage
    return new Promise((resolve) => {
      axios({
        method: 'post',
        url: url,
        data: JSON.stringify(data),//将post请求的数据转化为json字符串
        headers: { 'Authorization': storage.token,'Content-Type': 'application/json; charset=UTF-8'},//注意点2
        cancelToken: new CancelToken(c => {
          cancel = c
        })
      }).then(res => {
        resolve(res)
      })
    })
  },
  //delete请求
  delete(url, data) {
    let storage = window.localStorage
    return new Promise((resolve) => {
      axios({
        method: 'delete',
        url: url,
        data: JSON.stringify(data),//将post请求的数据转化为json对象
        headers: { 'Authorization': storage.token, 'Content-Type': 'application/json; charset=UTF-8' }
      }).then(res => {
        resolve(res)
      })
    })
  },
  //put请求
  // put(url, data) {
  //   let storage = window.localStorage
  //   return new Promise((resolve) => {
  //     axios({
  //       method: 'post',
  //       url: url,
  //       data: qs.stringify(data),//注意点3
  //       headers: { 'Authorization': storage.token },
  //     }).then(res => {
  //       resolve(res)
  //     })
  //   })
  // },
}

注：

1. resolve(res)是接收请求到的数据，然后在return给调用的函数。如果是 resolve(res)，那么函数获取到的数据就是为
   但是项目只要data里的数据，那么就要改成resolve(res.data)
2. ‘Authorization’: storage.token是要用到用户的token，这个就要自己去获取了
3. qs.stringify(data);qs是一个url参数转化(parse和stringify)的js库，要用的话百度qs.js去下载

5.编写请求函数（这个就根据自己项目来创建，不必和我一样）

import http from "~/http/";
export function getList() {
    return http.get('/xxxxx')
}

然后在需要用到接口函数的页面调用
例如

<template>
  <div>
    首页
  </div>
</template>
<script>
	import {getList} from '~/api/index.js'
	export default{
		methods:{
			get(){
				getList().then(res=>{
					console.log(res)
				})
			}
		},
		mounted(){
			this.get()
		}
	}
</script>

输出

最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！