移动端主页内容 part4 axios

Posted 2021-03-15 容忍君

vue中发送ajax有很多工具可用

浏览器自带的fetch

现在推荐：

axios第三方模块（vue中发送ajax）

特点：

跨平台的数据请求

• 浏览器中xhr请求
• node服务器中发送http请求

技巧：

一个首页中有五个组件。每个组件需要发送数据请求。那就是五个请求。那性能就很低

我们可以在根组件中发送一个请求 然后父子件传值 。

知识点static  整个项目中外部仅仅能直接访问这个文件夹内部的内容

作用：本地数据模拟 不提交到git仓库（gitignore 中写一下模拟数据文件地址即可）

使用步骤

1.安装

npm install axios --save

2.使用

home根组件中引入

import axios from ‘axios‘   //是否可以引入在项目入口文件

 

3.axios中url地址解决方案  

原因：本地模拟数据用的是本地模拟url

上线之前改动代码（修改url） 是非常不建议的

开发环境中如果有一个转发机制 把url中 api/index.json 文件的请求转发到我本地的mock文件夹下（就是static中模拟数据文件夹）

解决：vue中提供一个proxy代理功能

config文件中--- index.js   ----  

文件中有一个配置项目

module.export = {
   dev: {
  proxyTable:{
    ‘/api‘ : {
     target: ‘http://localhost:8080‘,
    pathRewrite: {
    ‘^/api‘: ‘/static/mock‘
}      
}
}
}   
}

当开发环境访问api时候 vue脚手架工具会帮我们替换地址（开发环境的转化）