Vue安装axios实现接口请求

一、vue-cli使用aios

1、安装命令:cnpm instal  axios --save

2、main.js引入全局使用

//axios

import axios from ‘axios‘
Vue.prototype.$axios = axios

3、组件或页面中使用

 methods:
      {
        testAxios1:function(){
            console.log(‘test‘);
             this.$axios({
                                method: ‘get‘,
                                url: ‘data/personData.json‘
                                })
                                .then(function (response) {
                                console.log(response)
                                })
                                .catch(function (error) {
                                console.log(error)
                                })

        },

二、axios配置开发环境跨域请求代理

1:打开config/index.js

在这里面找到proxyTable{},改为这样:

  proxyTable: {
      ‘/api‘: {
        target: ‘http://localhost:8085‘,//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          ‘^/api‘: ‘‘//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用‘http://40.00.100.100:3002/user/add‘,直接写‘/api/user/add’即可
        }
      }
    },

2、使用

 methods:
      {
        testAxios1:function(){
            console.log(‘test‘);
             this.$axios({
                                method: ‘post‘,
                                url: ‘http://localhost:8085/screen/selCaugh‘
                                })
                                .then(function (response) {
                                console.log(response)
                                })
                                .catch(function (error) {
                                console.log(error)
                                })

        },

三、axios传参

1:Vue官方推荐组件axios默认就是提交 JSON 字符串,所以我们要以json字符串直接拼接在url后面的形式,直接将json对象传进去就行了

let postData = {
  companyCode:‘tur‘,
  userName:‘123456789123456789‘,
  password:‘123456‘
}
axios.get(‘/api/yt_api/login/doLogin‘,{
  params: {
    ...postData,
  }
})
.then(function (response) {
  console.log(1)
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

原文地址:https://www.cnblogs.com/jiangshiguo/p/12105456.html

时间: 2024-11-07 19:18:15

Vue安装axios实现接口请求的相关文章

vue打包后,接口请求404的完美解决方案

在开发环境中,和后台对接为了解决跨域问题,使用了代理,也就是vue的proxyTable,但是打包放到生产环境中去时,接口请求不到,404,原因是开发环境的代理并不能用到生产环境,但是直接在请求接口是使用服务器地址,可以成功,但是会造成cookie丢失而失去权限验证 我脑海里出现有两种办法,一是使用代理,如何解决接口路径请求404的问题,二是直接写请求路径,如何解决cookie丢失的问题 之前因为cookie丢失,后台忙活了很长时间,好不容易才解决的,加之开发环境下并不会丢失,所以我的想法是继续

vue使用Axios做ajax请求

vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在要使用的文件中引入axios import axios from 'axios' 3. 使用axios做请求 可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的.如果没有指定 method,请求将默认使用 get 方法. { // `url` 是用于请求的服务器 URL url

vue中axios发送post请求,后端(@RequestParam)接不到参数

遇到的问题描述 :axios post 请求,后端接收不到参数. 我们的接口是java,用@RequestParam来接收前端的参数 解决方案:使用qs:axios中已经包含有qs,所以无需重新安装,直接引入就好 import Qs from 'qs'//引入qs let chedata = { data: encStr, sign: md5.hexMD5(che), timestamp: timestamp, } //chedata是我需要传递给后端的参数 console.log(Qs.str

封装axios的接口请求数据方法

lib文件夹中http.js文件的内容 包含了数据请求,路由的拦截,同时向外界暴露的是一个方法,方法内有三个参数,分别为请求的方式,地址,数据 1 import axios from 'axios'; 2 import qs from 'qs'; 3 4 const server=axios.create({ 5 timeout:5000, 6 withCredentials:true 7 }) 8 9 server.interceptors.request.use((config)=>{ 10

【Vue】axios post提交请求转为form data

axios.js import axios from 'axios'; import qs from 'qs'; // axios 配置 axios.defaults.timeout = 8000; //配置请求头 // axios.defaults.headers = {'Content-Type': 'application/json;charset=UTF-8'}; axios.defaults.headers = {'Content-Type': 'application/x-www-f

vue中采用axios发送post请求

这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在运用npm install axios的时候就会默认安装qs,因此我们就得将qs引入到axios中,然后需要再通过实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 1 let qs = require

vue项目实践-添加axios封装api请求

安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安装)转换后提交格式为 application/x-www-form-urlencoded 通过设置 transformRequest 属性 data => qs.stringify(data) 可以正常表单形式提交 import axios from 'axios' const instance =

解决vue axios跨域请求发送两次问题

问题: vue axios跨域请求,在Request Headers加Authorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求. 原因: 跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯.如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求. 解决方法: 后台:判断请求方式是OPTIONS,则不处理: 预请求 发送真正请求  PHP解决方法 class Common ex

Vue框架axios请求(类似于ajax请求)

Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></scr