nuxt数据请求

清疚 2023-01-11 09:07 280阅读 0赞

**1.创建项目（自行百度）  
2.安装axios、proxy模块**  
在项目按住‘shift’+鼠标右键，打开命令窗口，输入**npm i @nuxtjs/axios @nuxtjs/proxy -D**，会自动下载axios和proxy模块（[解决跨域问题][Link 1]）  
**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**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]

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)，那么函数获取到的数据就是为![在这里插入图片描述][20210126151525550.png]  
    但是项目只要data里的数据，那么就要改成resolve(res.data)
2.  ‘Authorization’: storage.token是要用到用户的token，这个就要自己去获取了
3.  qs.stringify(data);qs是一个url参数转化(parse和stringify)的js库，要用的话百度**qs.js**去下载

**5.编写请求函数（这个就根据自己项目来创建，不必和我一样）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 1]

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>

输出  
![在这里插入图片描述][20210126160002545.png]

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

[Link 1]: https://blog.csdn.net/xliang111/article/details/103963888
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]: /images/20221119/b425174de8f441f6924d686764e04ad5.png
[20210126151525550.png]: /images/20221119/66ccc4c7481d4302b79e033afb16c8dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 1]: /images/20221119/a74915c3c3924b98913e01434080325b.png
[20210126160002545.png]: /images/20221119/ca2100d97e9c4adca0006bef0745fef4.png