2021-06-21 axios 实现网络请求并使用nodejs实现代理

安装

npm i -S axios     上线用S下载依赖包     不上线用D

在需要的组件中写ajax

 引入 axios  库
 import axios from "axios"
 //const url = https://api.iynn.cn/film/api/v1/getNowPlayingFilmList? 
 cityId=320900&pageNum=1&pageSize=10

const url = 'http://localhost:4000/api/getNowPlayingFilmList'

export default {

// 在生命周期 mounted 中写ajax请求
//async 用来说明这个函数是一个异步函数  async 返回值是一个对象

async mounted(){
  
//发起ajax请求
//axios.get(url)返回的是一个 promise
// await 等待的意思   等待promise对象 执行完毕并返回结果
let ret  = await axios.get(url)
consloe.log(ret.data)
}
}

客户端请求数据因为 浏览器有同源策略  所以产生了跨域问题  如果服务器和服务器之前请求数据就不会产生跨域问题


此时此刻我们用node.js写一个服务器实现代理
 创建一个文件夹
npm init  初始化
npm i -S express cors 安装服务器模块 
npm i -S axios  服务器代理可以用

//引入express 模块
const experss = require('experss')
// 引入cors 模块  跨域中间件
app.use(require('cors')())

//引入axios
const axios require('axios')

//初始化模块创建一个对象
const app = experss()

//当客户端主动请求此地址时  我们主动去请求别的地址

//请求  api下的 /api/getNowPlayingFilmList 时候
app.get('/api/getNowPlayingFilmList' ,(req , res) =>{
//主动去请求  
const url = https://api.iynn.cn/film/api/v1/getNowPlayingFilmList? 
cityId=320900&pageNum=1&pageSize=10


axios.get(url).then(ret =>res.send(ret.) )


})
 
nodemon app.js  启动node.js

安装

npm i -S axios     上线用S下载依赖包     不上线用D

在需要的组件中写ajax

 引入 axios  库
 import axios from "axios"

const url = 'http://localhost:4000/api/getNowPlayingFilmList'

export default {

// 在生命周期 mounted 中写ajax请求
//async 用来说明这个函数是一个异步函数  async 返回值是一个对象

async mounted(){
  
//发起ajax请求
//axios.get(url)返回的是一个 promise
// await 等待的意思   等待promise对象 执行完毕并返回结果
let ret  = await axios.get(url)
consloe.log(ret.data)
}
}

客户端请求数据因为 浏览器有同源策略  所以产生了跨域问题  如果服务器和服务器之前请求数据就不会产生跨域问题

此时此刻我们用node.js写一个服务器实现代理
 创建一个文件夹
npm init  初始化
npm i -S express cors 安装服务器模块 
npm i -S axios  服务器代理可以用

//引入express 模块
const experss = require('experss')
// 引入cors 模块  跨域中间件
app.use(require('cors') () )

//引入axios
const axios require('axios')

//初始化模块创建一个对象
const app = experss()

//当客户端主动请求此地址时  我们主动去请求别的地址

//请求  api下的 /api/getNowPlayingFilmList 的时候我们
app.get('/api/getNowPlayingFilmList' ,(req , res) =>{
//主动去请求  
const url = https://api.iynn.cn/film/api/v1/getNowPlayingFilmList? 
cityId=320900&pageNum=1&pageSize=10

axios.get(url).then(ret =>res.send(ret.data) )

})
 
nodemon app.js  启动node.js