vue基础知识第十一天 axios

0、回顾上周内容

组件
组件通信

• 父子组件传值
• 子父组件传值
• 兄弟组件传值

路由

• 基本路由
• 嵌套路由
• 编程式导航
• 动态路由
• 路由相关的零散知识点
• 依据美团案例扩展的零散知识点的应用

一、axios（http库）

1.1数据交互的方法

• ajax 不能解决跨域问题（get/post）
• jsonp 可以解决跨域问题 get
• form 表单 不用
• fetch 兼容性
• axios
  原生ajax

let xhr = new XMLHttpRequest()
xhr.open('method',url,true)
xhr.send()
xhr.onreadyChange= function(){
    if(xhr.readStatus==4&&xhr.readStatus==200){

    }
}

JQ中的ajax

$.ajax({ 
    url:'你要链接的地址',
    method:'get/post',
    data:{//请求参数,如果没有，可以省略

    },
    success:function(){
        //成功之后的回调
    },
    error(){

    },
    complate(){
        //不管成功，还是失败，都会进入到这里面
    }
})

1.2解决跨域

webpack 配置代理 (前端解决)
gulp 配置代理 (前端解决)
node服务器 （后端服务器解决，node中间件。app.use()）
nginx(反向代理web服务器 上线之后解决跨域问题)
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务

1.3 axios

axios是什么？
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
**网址：**https://www.npmjs.com/package/axios（npm）
**中文官网：**http://www.axios-js.com/zh-cn/docs/
axios的特点：
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
安装方式：npm isntall axios
axios使用方法

//直接调取axios
import axios from 'axios'
axios({
    url:'你要链接的地址',
    method:'get/post' //get请求方式可以省略,
    params:{}//get传参方式，params是axios规定的不要与动态路由中params混乱
    data:{}//post传参方式
})
.then(res=>{
    //http 200时候的返回
})
.catch(err=>{
    //http非200时候的返回
})
.finally(()=>{
    //不管你成功还是失败都会走这个流程
})
//直接写get请求
axios.get('url地址',{
    params:{
        //请求参数
    }
})
.then(res=>{
    //http 200时候的返回
})
.catch(err=>{
    //http非200时候的返回
})
.finally(()=>{
    //不管你成功还是失败都会走这个流程
})
//直接写post请求
axios.post('url地址',{
    //参数内容
})
.then(res=>{
    //http 200时候的返回
})
.catch(err=>{
    //http非200时候的返回
})
.finally(()=>{
    //不管你成功还是失败都会走这个流程
})

全局挂载axios

//main.js
import axios from 'axios'
Vue.prototype.http = axios
//组件中
this.http.axios({}).then().catch()

1.4 vue中解决跨域问题

webpack配置代理

//config => index.js **配置文件修改之后，要记得重启**
proxyTable:{//配置跨域信息
'/api':{
    target:'http://localhost:4000',//你要跨域的地址
    changeOrigin:true,
    pathRewrite:{//地址重写
        '^/api':'http://localhost:4000'
    }
}
}

---

• less

npm install less less-loader --save-dev
module.exports = {
rules: {
{
test: /.less$/,
loader:‘style-loader!css-loader!less-loader’
}
}
}