第三方包 vue-resource

Posted xixiaijunjun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第三方包 vue-resource相关的知识,希望对你有一定的参考价值。

使用 vue-resource 发起 get post jsonp 请求

注意:

假设当前服务器后台监听的端口是 7000

1,get post 既可以请求数据,也可以发送数据

2,请求的是 服务器 所在的 url 路径(http://localhost:7000/add),当然,如果你的客服端也是由 node 后台直接读写文件返回的 html 文件。那么证明 该 html 页面也是放在该和后台监听的 同一个端口下面。就可以不写全请求的url(如:/add 注意:那么就相当于请求; http://localhost:7000/add

3 , jsonp 是用 script 标签来完成跨域请求的 (请求 url,然后返回 res.end(‘cb(data))‘)由html里面书写 js 函数自行操作

 

注意:form 表单提交数据,如果 在 <input type=‘submit‘> 中添加点击事件,那么 form 表单提交的数据就不会在 url 处 自动拼接数据(/add?id=&name=)。拼接后是会有数据的 (/add?id=123&name= zhangsan)

 

Vue.http.get(‘/someUrl‘, [config]).then(successCallback, errorCallback);
Vue.http.post(‘/someUrl‘, [body], [config]).then(successCallback, errorCallback);
?
// in a Vue instance
this.$http.get(‘/someUrl‘, [config]).then(successCallback, errorCallback);
this.$http.post(‘/someUrl‘, [body], [config]).then(successCallback, errorCallback);
?
?
 this.$http.jsonp(‘https://suggest.taobao.com/sug?q=笔&callback=sug‘).then(function (result) {
                console.log(result);
                console.log(result.body);
              })

 

List of shortcut methods:

  • get(url, [config])

  • head(url, [config])

  • delete(url, [config])

  • jsonp(url, [config])

  • post(url, [body], [config])

  • put(url, [body], [config])

  • patch(url, [body], [config])

Config

ParameterTypeDescription
url string URL to which the request is sent
body Object, FormData, string Data to be sent as the request body
headers Object Headers object to be sent as HTTP request headers
params Object Parameters object to be sent as URL parameters
method string HTTP method (e.g. GET, POST, ...)
responseType string Type of the response body (e.g. text, blob, json, ...)
timeout number Request timeout in milliseconds (0 means no timeout)
credentials boolean Indicates whether or not cross-site Access-Control requests should be made using credentials
emulateHTTP boolean Send PUT, PATCH and DELETE requests with a HTTP POST and set the X-HTTP-Method-Override header
emulateJSON boolean Send request body as application/x-www-form-urlencoded content type
before function(request) Callback function to modify the request object before it is sent
uploadProgress function(event) Callback function to handle the ProgressEvent of uploads
downloadProgress function(event) Callback function to handle the ProgressEvent of downloads

1. get post jsonp三种请求方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title></title>
    <script type="text/javascript" src="../vue.js"></script>
    <!-- 注意:vue-resource 依赖于 Vue,所以要注意加载顺序 -->
    <script type="text/javascript" src="../vue-resource.min.js"></script>
?
</head>
<body>
    <div id="app">
        <input type="button" name="" value="get请求" @click=‘getInfo‘>
        <input type="button" name="" value="post请求" @click=‘postInfo‘>
        <input type="button" name="" value="jsonp请求" @click=‘jsonpInfo‘>
    </div>
?
?
<script type="text/javascript">
?
?
?
    new Vue({
         el:#app,
         data:{},
         methods:{
             
            getInfo() {
              this.$http.get(https://api.apiopen.top/singlePoetry).then(function (result) {
                console.log(result.data);
              })
            },
             
            /*
            三个参数:
              参数1:url请求路径 
              参数2:{body}请求体内容
              参数3:config 配置项 比如设置(application/x-www-form-urlencoded)
                    提交数据的方式。
            
            */
            postInfo() {
              this.$http.post(https://api.apiopen.top/singlePoetry,{发送的数据},{emulateJSON:true}).then(function (result) {
                console.log(result);
              })
            },
            jsonpInfo() {
              this.$http.jsonp(https://suggest.taobao.com/sug?q=笔&callback=sug).then(function (result) {
                console.log(result);
                console.log(result.body);
              })
            }
         }
    });
?
?
</script>
</body>
</html>

 

###

node 仿 jsonp 请求

跨域请求

 

注意:服务端返回形式是 当你客户端发起请求时,服务端以 res.write() 的形式返回给客户端的

跨域请求 的 script 标签中 (以字符串的形式)

客户端

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title></title>
    
</head>
<body>
?
?
<script type="text/javascript">
    function showInfo(data) {
        console.log(data);
    }
</script>
?
<script src="http://127.0.0.1:8000/getscript?callback=showInfo"></script>
?
</body>
</html>

 

服务端

?
const http =require(‘http‘);
const url = require(‘url‘);
const querystring = require(‘querystring‘);
?
http.createServer((req,res)=>{
?
  // const url = req.url;
  // var myURL = url.parse(‘https://user:[email protected]:8080/p/a/t/h?query=string#hash‘);
  // console.log(myURL);
  // var querystr = querystring.parse(myURL.query);
  // console.log(querystr);
?
   const getURL = url.parse(req.url,true);
?
   console.log(getURL);
?
  if(getURL.pathname === ‘/getscript‘) {
      
      var data = {
        name:‘little‘
      };  
      var scriptStr = `${getURL.query.callback}(${JSON.stringify(data)})`;
?
      res.end(scriptStr);
  }
  else {
    res.write("console.log(‘not found‘);");
    res.end();
  }
?
}).listen(8000,()=>{
    console.log(‘localhost:8000‘);
});

 

 

 

以上是关于第三方包 vue-resource的主要内容,如果未能解决你的问题,请参考以下文章

Vue学习之vue-resource小结

vue系列——数据请求

10天从入门到精通Vue-vue-resourceVue中的动画

终于掉坑里了!!!vue-resource和jquery的ajax不一样

Python的基本库与第三方库

03 (H5*) Vue第三天