码迷,mamicode.com
首页 > Web开发 > 详细

Vue.js Ajax

时间:2019-11-09 13:30:08      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:target   路径   index   ble   ios   cas   参数   The   foreach   

1.封装AJAX模块

(1)在src目录下新建api目录,新建ajax.js,写入
(2)引入axios
(3)定义ajax函数,并暴漏出去
(4)ajax函数中调用axios发送请求,并将返回的promise对象 return出去

// 引入axios
import axios from 'axios'

// 暴露ajax
// ajax接收3个参数:url,参数,请求方法
export default function ajax (url='',data={},type='get') {
    let promise
    if(type.toLowerCase() === 'get'){
        //如果是get请求,则将参数拼接到url后面
        let dataStr = ''
        Object.keys(data).forEach(key => {
            // key=value&
            dataStr += key + '=' +data[key] + '&'
        })
        if(dataStr !== ''){
            // 去除最后一个&
            dataStr = dataStr.substring(0,dataStr.lastIndexOf('&'))
            // 将参数拼接到url后面
            url = url + '?' + dataStr
        }
        // 发送get请求,返回一个promise对象
        promise = axios.get(url)
    }else {
        // 发送post请求,返回一个promise对象
        promise = axios.post(url,data)
    }
    // 将promise返回
    return promise
}

(5)引入该模块并使用

// App.vue
<script>
import ajax from './api/ajax.js'

export default {
  mounted () {
    const url = 'https://api.github.com/search/repositories'
    ajax(url,{q:'vue',sort:'stars'}).then(res => {
      console.log(res.data.items[0])
    }).catch(error => {
        alert('请求失败')
    })
  }
}
</script>

2.配置代理解决跨域问题

打开config/index.js文件,找到proxyTable属性进行

proxyTable: {
    '/api': {  // 匹配以/api开头的所有路径
        target: 'http://localhost:4000', // 代理的后端api基础路径
        changeOrigin: true, // 支持跨域
        pathRewrite: { // 重写路径,去掉路径中开头的'/api'
            '^/api': ''
            // '^/api': 'api' 
        }
    }
}

如果要访问后台api地址,例如:http://localhost:4000/List

axios.get('/api/List') // 会 自动替换成 http://localhost:4000/List

如果配置成这样:

pathRewrite: {
    '^/api': 'api'
}

访问后台地址就应该是 http://localhost:4000/api/List

Vue.js Ajax

标签:target   路径   index   ble   ios   cas   参数   The   foreach   

原文地址:https://www.cnblogs.com/OrochiZ-/p/11824964.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!