来自 软件资讯 2019-12-18 16:00 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

奥门威尼斯网址vue项目里面的axios的请求总结,即

做个笔记省的下次自己忘记了又要上网找的焦头烂额的,内容估计说的乱七八糟的。

奥门威尼斯网址 1

第一步:设置mian.js 中axios的引入方式

在vue项目中,一般的请求方式有四种:(最重要的是第四种)

至此就可以使用该文件的proxyTable方法了。

添加请求路由

最后运行打开网站如果在Console里可以看到data就说明成功了。yeah 余汪汪万岁

2.对模拟数据的请求(mock)

  后来又听说了proxyTable,需要修改config/Index.js里面的内容。 无奈创建的项目没有该文件(怪我官网的内容没看仔细,也没有好好看控制台vue的帮助指令)。今天无意中看到可以用vue init [project-name]的方式创建项目这样子就会有index.js文件了。

4.对项目的数据的对接(跨域问题)

dev: {
//别的有了的内容可以不用管它,设置proxyTable就好了 
  proxyTable: {
    '/news/latest': {
      target: ' https://news-at.zhihu.com/api/4/',//接口域名+如果有端口 + 后续
      changeOrigin: true,//是否跨域
      // pathRewrite: {
      //   '^/news/latest': '/news/latest'//需要rewrite重写
      // } //这个什么ppathRewrite没有搞明白.反正没设置这个能用我也没有管它了- -
    }
  },

待续

第三步:最后就可以在你的vue文件下使用该api了

2.上面配置就可以发请求了

第二步:以知乎的获取不知道是热门还是最新内容的api为例(网上例子里拿来的)

因为我们在项目中,如果在自己的本地安装vue的话,怎么去请求后台接口的数据尼,如果在本地的开发的话,就会涉及到跨域问题

不知道这样子做有没有什么安全隐患,我觉得应该会是有的吧

其实还有一种做法,不确定是什么请求,但是确实可以请求到第三方的数据,不是jsonp的返回格式,上面那种是针对第三方接口返回的是jsonp的模式,可能下面这种更加通用的东西

  刚入门vue ,打算用vue的脚手架做一个小项目。需要用到第三方的api,无奈遇到各种各样的问题。

奥门威尼斯网址 2

修改config.js文件夹后, 通常需要重启一下这个服务才能生效(或许不是通常是必须)

运用到代码中:第一张图是在页面的组件的vue文件中运用(/src/components/recommend/recommend.vue),第一张图是在这个组件对于的js中对方法进行传参(里面的object.assign方法是object自带一个方法,自己上网百度学习,其实就是将所有的参数对象整合成一个object)——对应我的项目中的/src/api/recommend.js

  比如 Access-Control-Allow-Origin ,或者使用了ajax的jsonp模式之后也会出现个别api不兼容这个模式而出现另一个错误。还有的需要修改后端php之类的,头大。

1.首先找到build里面的dev-server.js

import axios from 'axios'
Vue.prototype.$ajax = axios

1.引入axios的插件

this.$ajax({
  url: '/news/latest'', //这里就是上面target上面那个内容
  //params: { type: 'hot'},
  //这个params就是get参数的data,不过在这里不需要.给自己提个醒
  method: 'get',
  withCredentials: true
}).then(data=> {
  console.log(data);
}).catch(error => {
  console.log(error);
})

奥门威尼斯网址 3

待续

  网上的说法是$ajax相当于axios的别名,按我的理解命名成别得应该也可以吧。

奥门威尼斯网址 4

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:奥门威尼斯网址vue项目里面的axios的请求总结,即

关键词: