vue学习经验总结(axios的使用)

it2023-03-26  79

1:安装axios

npm install axios --save (页面运行的使用需要调用)

2:在项目的入口main.js文件中引入 引入的时候直接引入 不要带路劲

import axios from "axios"; Vue.prototype.axios = axios;

并且将引入的axios对象挂载到原型对象中 在其他的地方就都可以调用了

在其他页面就可以调用了 但是有巨坑 如果调用数据调试 使用console 请加上window.console.log

3:在平时的项目中 可以写相对路径 去请求数据 但是在cli4中 需要对数据进行模拟(mock)

4:快速模拟数据 第一步全局安装

npm install http-server

5:在进入需要模拟的数据文件夹下面 启动命令 http-server --cors 启动一个允许跨域的服务

export default {     mounted:function(){  this.axios({   method: 'get',   url: 'https://m.maizuo.com/gateway?type=2&cityId=110100&k=9667745',   headers:{       "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"15716520091065151890029","bc":"110100"}',      "X-Host": "mall.cfg.common-banner"   } }).then(function(result){     console.log(result); })  } }

也可以使用第二种方式:进行反向代理的使用 配置vue.config.js (简化的webpack)

 

最新回复(0)